我有以下脚本,我希望它在动画的最后一次移动后停止移动,而不是它只是闪烁/重复。我尝试添加.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>
答案 0 :(得分:1)
动画一遍又一遍地运行,因为每次触发window.scroll
事件时都会重新启动一次。
如果您希望动画只发生一次,您可以使用.one('scroll')
附加事件,然后立即处理它:
$(window).one('scroll',function () {
if ($(window).scrollTop() > 0) {
loadDiv();
}
});
答案 1 :(得分: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;
}
答案 2 :(得分: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