通过scrollTop()判断滚动条到指定位置执行动画，代码执行很多次怎么办？

发布于
2017-12-03

1.通过scrollTop()判断滚动条到指定位置执行动画，代码执行很多次怎么办？
点击查看DEMO，请用浏览器模拟手机查看效果，console.log有打印执行次数。

现在的问题是我每次滚动他就执行一次，然后往回滚也会一直执行，一直判断scrollTop()，这样肯定会很卡，所以来请教大神们怎么解决。

HTML代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="box1"><img src="//img.alicdn.com/tfs/TB1S53efxrI8KJjy0FpXXb5hVXa-520-280.jpg"></div>
  <div class="box2">
        <div class="item1 tinRightIn"></div>
        <div class="item2 tinRightIn"></div>
        <div id="test" class="item3 tinRightIn"></div>
    </div>
    <div class="box3">
        <div class="c1 tinRightIn"></div>
        <div class="c2 tinRightIn"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

JS代码如下：

var nummmm = 0; 
$(document).ready(function () {            
     $(window).scroll(function () {                
         if ($(window).scrollTop() > 100) {
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
         }
         if ($(window).scrollTop() > 600) {
             $('.box3').addClass('animation-show');
             console.log('test2');
         }
     });
 });
//动画结束时事件
var item2 = $(".item2")
document.querySelector('#test').addEventListener("webkitAnimationEnd", function(){ 
    this.className = this.className.replace('tinRightIn', 'show');
    item2.addClass("hidden");
    console.log(2); 
}, false);

CSS代码如下：

*{margin: 0;padding:0}
html,body{width:100%;}
img{
 width: 100%; 
}
.box2,.box3{
    width:100%;
    background: #ddd;
}
.box3{background: #eee;}
.item1,.item2,.item3{
    height: 500px;
    background: #ff0;
    margin-bottom: 30px;
}
.c1,.c2,.c3{
    height: 500px;
    background: red;
    margin-bottom: 30px;
    opacity: 0;
}
.item3{
    opacity: 0;
}
.hidden{
    opacity: .5;
}
.show{
    opacity: 1;
}
.animation-show .tinRightIn{
    -webkit-animation: tinRightIn 1.2s ease 1.2s;
    animation: tinRightIn 1.2s ease 1.2s;
}
@-webkit-keyframes tinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2rem) translateY(-2rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
    }
}

不知道要这样判断动画是否执行完这样的方法对不对呢？

javascript html css

html5 jquery

阅读 6.9k

5 个回答

得票最新

papersnake

12k31739

发布于
2017-12-03

✓ 已被采纳

$(document).ready(function () {            
     $(window).scroll(function () {                
         if ($(window).scrollTop() > 100) {
             if(!$('.box2').hasClass('animation-show')){
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
             }
         }
         if ($(window).scrollTop() > 600) {
             if(!$('.box3').hasClass('animation-show')){
             $('.box3').addClass('animation-show');
             console.log('test2');
             }
         }
     });
 });

木树

34253751

发布于
2017-12-03

全局做一个标记，执行的时候先判断此标记是否为true，是的话就说明执行过了。如果是false的话再执行。

止醉

7711620

发布于
2017-12-03

var nummmm = 0;
let Ani_is_finish = {
        argument_1:true,
        argument_2:true
 };
$(document).ready(function () {
        $(window).scroll(function () {
            if (Ani_is_finish['argument_1'] && $(window).scrollTop() > 100) {
                $('.box2').addClass('animation-show');
                console.log(nummmm++);
                Ani_is_finish['argument_1'] = false;
            }
            if (Ani_is_finish['argument_2'] && $(window).scrollTop() > 600) {
                $('.box3').addClass('animation-show');
                console.log('test2');
                Ani_is_finish['argument_2'] = false;
            }
        });
});

名分开就是姓名

511

发布于
2017-12-03

新手上路，请多包涵

var nummmm = 0;
$(document).ready(function () {

var timer          
 $(window).scroll(function () {  
     clearTimeout(timer)
     timer=setTimeout(function(){
         if ($(window).scrollTop() > 100) {
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
         }
         if ($(window).scrollTop() > 600) {
             $('.box3').addClass('animation-show');
             console.log('test2');
         }
     },200)//这个时间你可以测试下，选择一个适合的时间
 });

});