Javascript 奇怪的滑块行为

滑块页：。当您将鼠标悬停在图像上时，底部的标题会向上滑动，鼠标离开时，标题会再次向下滑动。一切都很好。现在，如果您通过菜单导航到portfolio，滑块的行为就会变得异常（导航是通过ajax完成的）。 每次鼠标移到图像上时，标题都会越来越高，每次鼠标移到图像上时，标题会越来越低。 下面是代码（我知道它不是很整洁，但一旦一切正常，我会清理它：

$(window).resize(sizeImg);
    $(document).ready(sizeImg);

    function sizeImg() {
        var theImg = $('.mediaholder_innerwrap');
        var w = $(window).height();
        var h = $('header').height();
        var t = $('div.title').height();
        var d = $('h4.showbiz-title.txt-center').height();
        var f = $('footer').height();
        var desiredHeight = w - h - t - f;
        $(theImg).css("height", desiredHeight);
        var p = $('.detailholder p').height();
        var botOffset = (0 - p - 20);
        var oneSlide = $('.showbiz div ul li');
        var theCaption = $('.detailholder');
        $(theCaption).css('position', 'absolute');
        $(theCaption).css('opacity', '0.7');
        $(theCaption).animate({bottom: botOffset});


        // same but with admin bar offset
        if($('div#wpadminbar').length ) {
            var adminBar = $('div#wpadminbar').height();
            desiredHeight = w - h - t - f - adminBar;
            $(theImg).css("height", desiredHeight);
        }


        //to make img properly fit into div
        $('.mediaholder_innerwrap img').css('height', '100%');
    }

    //check if the page changed (ajax) and apply  the image style (position) again
    checkForChanges();
    var bodyClass = $('body').attr('class');

    function checkForChanges() {
        setInterval(function(){
    if($("body").attr('class') !== bodyClass) {

        sizeImg();
        bodyClass = $("body").attr('class');
    }
    }, 100);
    }

    // mouseover and mouseout function
    // Add correct behavior on hovering title of the slide
    $(document).on("mouseover", '.overflowholder ul li', (function() {
        $('.detailholder').css('position', 'absolute');
        $('.detailholder').animate({bottom: 0});
        $('.detailholder').css('opacity', '0.95');
        }));


    $(document).on("mouseout", '.overflowholder ul li', (function() {
        var p = $('.detailholder p').height();
        var botOffset = (0 - p - 20);
        $('.detailholder').css('position', 'absolute');
        $('.detailholder').animate({bottom: botOffset});
        $('.detailholder').css('opacity', '0.7');
        }));

我知道代码很不干净，有很多重复，但这不是现在的重点，只需要确保在从home2页面转换后滑块工作正常。

---

非常感谢。

我不知道这是否是您描述的奇怪行为，但对我来说，底部栏会周期性地上下跳动一段时间-这是当您将鼠标悬停在图像底部时。我建议您使用

.stop（）

方法，如下所示：

$（theCaption）.stop（）.animate（{bottom:botOffset}）；

---

它会停止当前正在处理的动画，并立即启动新的动画。否则，动画会堆积在队列中，并一个接一个地进行处理。

您好，谢谢您的回答。这也是一个小问题，但我目前没有重点关注它。如果您转到home2页面并从那里单击，您可以看到问题“公文包”页面。然后，如果你将鼠标悬停在滑块图像上，标题就会停止固定在底部，并且随着每次新的悬停，标题会越来越高（当你从图像中鼠标移出时，标题会越来越低）。奇怪的是，我看不到你所描述的问题，只是上下跳动。在FF 23.0.1、Chrome 29.0.1547.66、IE10上尝试过