隐藏式可见度在淡出后多次闪烁

visibility hidden flashes multiple times after fadeIn

本文关键字：闪烁 淡出 可见度 隐藏      更新时间：2023-09-26

我试图让一些文本在一些图像移动后褪色，一旦你到达页面上的某个点。如果我已经在页面下方并刷新，它可以正常工作，但当我从顶部滚动到该区域时，它会执行正确的动画，但随后文本开始一遍又一遍地闪烁。有办法阻止这一切吗?

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>

您已经设置了导致这种情况的条件。

如果你看一下，你是触发动画每次窗口滚动和scrollTop值大于1350px。如果你继续滚动超过这个点，动画将继续触发。

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

添加到if语句中:

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

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

你能不能试试以下

$(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');
                    });
                }
            });
        });
相关文章：