Question

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

这是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>

Answer 1

您已设置了导致此问题的条件。

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

您可能希望在满足条件后立即取消绑定eventListener（假设您不希望在刷新页面之前再次发生动画）。

在if语句中添加：

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

一旦满足条件，这将完全取消与窗口的滚动侦听器绑定。

Answer 2

你可以试试

吗？

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

fadeIn后，可见性隐藏闪烁多次

2 个答案: