0

starting from some weeks ago after a new Firefox release, a slidebox based on jquery I'm using on my blog started flapping when called scrolling down the page. I upgraded first the jquery script from 1.7.2 to 1.10.0 but without benefit, when I scroll down the page and the slidebox is called it irritatingly starts flapping for a fist of seconds, then it stops on the wrong position, almost complete out but not at all.

Here is the code i'm using:

$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });

    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});

...and here is the CSS:

#slidebox{
width:280px;
height:100px;
padding:10px;
background-color:#abc057;
border-top:3px solid #191919;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}

#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}

a.close{
background:transparent    url(http://tympanus.net/Tutorials/EndPageSlideOutBox/images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}

Does anyone has an idea how to figure out it?

Thanx!

4

1 回答 1

0

当您slidebox参考右侧设置动画时，似乎会出现问题。如果您将代码更改为引用left，则抖动消失。

jsfiddle

if ($(window).scrollTop() > distanceTop)
    $('#slidebox').animate({'left':'160px'},500);
else
    $('#slidebox').stop(true).animate({'left':'1500px'},500);

当然，您必须更改值以使其与您的页面匹配。

于 2013-06-25T12:02:12.020 回答