Question

滑块页面：http://livinginspace.staging.wpengine.com/portfolio/。当您将鼠标悬停在图像上方时，底部的标题会向上滑动，鼠标移开时会再次向下滑动。一切都很好。现在，如果你去http://livinginspace.staging.wpengine.com/home2/并通过菜单导航到投资组合，滑块开始表现得很奇怪（导航是用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页面转换后滑块工作正常。非常感谢。

Answer 1

我不知道这是否是您所描述的奇怪行为，但对我来说，底栏会定期上下跳动一段时间 - 这是当您将鼠标悬停在图像的底部时。我建议您使用.stop()这样的方法：

$(theCaption).stop().animate({bottom: botOffset});

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

奇怪的滑块行为

1 个答案: