CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dave
dave

Reputation: 203

stop JS animation function

I have the following script, I would like it it stop moving after the last movement of the animation, instead it just flickers/repeats. I've tried adding a .stop but I'm not having much luck:

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>

Fiddle: http://jsfiddle.net/fatfrank44/bwbEu/9/

Upvotes: 2

Views: 1103

Answers (3)

acarito
acarito

Reputation: 640

I hope I'm understanding your question correctly... JofryHS makes a good point, to chain all of them together, which should be done either way for cleaner code - and this may help us better understand what you're trying to do. I think you can also make the animation stop by incrementing a variable after each animation, then check if that variable is a certain number before calling loadDiv() again.

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;
    });  
}

And when just make it so that checkIterate is set back to 0 when the page scrolls down again (or when scrollTop increases

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

The animation is running over and over because it's restarted once for every time the window.scroll event is triggered.

If you want the animation to happen exactly once, you can use .one('scroll') to attach the event and then dispose of it immediately:

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

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

Upvotes: 1

Joris Lindhout
Joris Lindhout

Reputation: 205

Not sure what you're looking for, but: 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});
    });  
}

and:

#image1 {
width: 165px;
height: 78px;
background-color: #fff;
overflow: hidden;
display:none;
}

Upvotes: 0

Related Questions