0

新しい Firefox のリリース後、数週間前から、ブログで使用している jquery に基づくスライドボックスが、ページを下にスクロールすると呼び出されると羽ばたき始めました。最初にjqueryスクリプトを1.7.2から1.10.0にアップグレードしましたが、ページを下にスクロールしてスライドボックスが呼び出されると、イライラして数秒間フラッピングし始め、間違った位置で停止し、ほぼ完全に停止しますしかし、まったくありません。

ここに私が使用しているコードがあります:

$(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();
    });
});

...そしてここに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;
}

誰かがそれを理解する方法を知っていますか?

ありがとう！

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 に答える