2

我有以下脚本，我希望它在动画的最后一次移动后停止移动，而只是闪烁/重复。我尝试添加 .stop 但运气不佳：

JS：

<script type="text/javascript">
 $(window).scroll( function() {  
    if ( $(window).scrollTop() > 0 ) {  
       loadDiv();  
    }  
});  
function loadDiv() {  
    $('#container-holder').fadeIn('slow', function() {  
        $(this).fadeTo("slow", 1);  
        $('#container, #imagetest1').fadeTo("slow", 1);
        $('#imagetest1').delay(30).animate({'margin-top': '0'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-78px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-156px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-234px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-312px'}, {duration:0, queue:true});
    });  
}  
</script>

CSS：

<style>
#background {
width: 200px;
height: 1000px;
border: 1px solid #999;
}
#container-holder {
width: 200px;
height: 200px;
border: 1px solid #999;
visibility: visible;
margin-top: 100px;
}
#container {
width: 160px;
height: 160px;
background-color: #333f;
border: 1px solid #333f;
}
#imagetest1 {
width: 162px;
height: 390px;
background-image: url('http://i811.photobucket.com/albums/zz40/mjl-admin/rainbow.jpg');
border: 1px solid green;
}
#image-container {
width: 10px;
height: 10px;
}
#image1 {
width: 165px;
height: 78px;
background-color: #fff;
overflow: hidden;
}
</style>

HTML：

<div id="background">
<div id="container-holder">
<div id="container">
    <div id="image1"><div id="imagetest1"></div></div>
</div>
</div>
</div>

小提琴：http: //jsfiddle.net/fatfrank44/bwbEu/9/

4

3 回答 3

1

动画一遍又一遍地运行，因为每次window.scroll触发事件时它都会重新启动一次。

如果您希望动画只发生一次，您可以使用.one('scroll')附加事件，然后立即处理它：

$(window).one('scroll',function () {
    if ($(window).scrollTop() > 0) {
        loadDiv();
    }
});

http://jsfiddle.net/mblase75/nRr2j/

于 2013-09-11T13:43:22.533 回答
0

不知道你在找什么，但是：http: //jsfiddle.net/bwbEu/10/

$(window).scroll( function() {  
    if ( $(window).scrollTop() > 0 ) {  
       loadDiv();  
    }  
});  
function loadDiv() {  
    $('#image1').fadeIn('slow', function() {  
        $('#imagetest1').delay(30).animate({'margin-top': '0'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-78px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-156px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-234px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-312px'}, {duration:0, queue:true});
    });  
}

和：

#image1 {
width: 165px;
height: 78px;
background-color: #fff;
overflow: hidden;
display:none;
}
于 2013-09-11T13:39:08.747 回答
0

我希望我能正确理解你的问题...... JofryHS 提出了一个很好的观点，将所有这些链接在一起，这应该以任何一种方式来实现更清晰的代码 - 这可以帮助我们更好地理解你想要做什么。我认为您也可以通过在每个动画之后增加一个变量来使动画停止，然后在再次调用 loadDiv() 之前检查该变量是否为某个数字。

var checkIterate = 0;

$(window).scroll( function() {  
     if ( $(window).scrollTop() > 0 && checkIterate < 5) {  
          loadDiv();  
     }  
});  
function loadDiv() {  
    $('#image1').fadeIn('slow', function() {  
        $('#imagetest1').delay(30).animate({'margin-top': '0'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-78px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-156px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-234px'}, {duration:0, queue:true});
        $('#imagetest1').delay(30).animate({'margin-top': '-312px'}, {duration:0, queue:true});
        checkIterate = 5;
    });  
}

并且当页面再次向下滚动时（或当 scrollTop 增加时）将 checkIterate 设置回 0

于 2013-09-11T13:52:43.080 回答