0

滑块页面： 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 页面转换后滑块可以正常工作。提前非常感谢。

4

1 回答 1

0

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

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

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

于 2013-09-19T13:34:46.060 回答