1

一旦您到达页面上的某个点，我正在尝试在某些图像移动后让一些文本淡入。如果我已经在页面下方并刷新，它工作正常，但是当我从顶部滚动到该区域时，它会执行正确的动画，但随后文本开始一遍又一遍地闪烁。有没有办法阻止这种情况？

这是javascript

$(document).ready(function(){
            $(window).scroll(function(){
                if ($(this).scrollTop() > 1350) {
               $('#managecontent1').animate({bottom: '0px'},900);
               $('#managecontent2').animate({bottom: '0px'},900,function(){
                        $('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
                   });
           }
                });
        });

这是HTML

<div id="twocolumntextcontainer">
        <div id="twocolumntextleft">
            <p>C.M.S. <span>Wordpress</span></p>
        </div>
        <div id="twocolumntextright">
            <p>F.T.P. <span>FileZilla</span></p>
        </div>
    </div>
    <div class="twocolumnlayout">
        <div id="managecontent1">
            <img src="img/wordpresslogo_203x203.png" />
        </div>
        <div id="managecontent2">
            <img src="img/filezillaicon_210x208.png" />
        </div>
    </div>
4

2 回答 2

1

你已经设定了会导致这种情况的条件。

如果你看一下，你是在每次窗口滚动并且 scrollTop 值大于 1350px 时触发动画。如果您继续滚动超过这一点，动画将不断触发。

一旦满足您的条件，您可能希望取消绑定 eventListener（假设您不希望动画再次发生，直到页面刷新）。

在你的 if 语句中添加这个：

$(this).unbind('scroll');

一旦满足您的条件，这将完全从窗口中解除滚动侦听器的绑定。

于 2013-03-08T04:55:54.583 回答
0

你可以尝试以下

$(document).ready(function () {
            $(window).scroll(function () {
                $('#twocolumntextcontainer').fadeOut("slow");
                if ($(this).scrollTop() > 1350) {
                    $('#managecontent1').animate({ bottom: '0px' }, 900);
                    $('#managecontent2').animate({ bottom: '0px' }, 900, function () {
                        $('#twocolumntextcontainer').fadeIn('slow');
                    });
                }
            });
        });
于 2013-03-08T04:56:05.143 回答