CODEWITHSUNDEEP
jqueryjquery-animateslide
user1846129
user1846129

Reputation:

Using multiple animations (in a row) on a single element

I tried it this:

$('.element').animate({marginLeft: '-=1'}, 1).animate({marginTop: '+=1'}, 1).animate({marginLeft: '+=1'}, 500);

The idea of this is that I am IN REALITY animating slides with the top margin, but I wan't the user to SEE that it is animating from left to right. I can't just normally slide from left to right in my situation, otherwise it would be easy.

The code above didn't get me the result I wanted, it just lagged for a while and appeared really quickly.

Upvotes: 1

Views: 190

Answers (1)

bashleigh
bashleigh

Reputation: 9314

I've found several different ways of achieving this type of procedural animation. One effective way is to start an animation in the callback 'finished' function as Dio's has stated. But A more effective way is to use queues. The default queue is 'fx' but you can make custom queues. I used this to help me with queues.

But if you don't like queue and want to be repetitive I made something similar using a setInterval function.

See my beta example here. (still not published). See below for code example for you example:

<script>
            $(document).ready(function(){
        sliderAnimation();                     
    });
    sliderAnimation(){
        var timer = setInterval(function(){
            slide();},500);
    }
slide(){
    var position $('.element').pos();
    var direcLeft = '-=';
    var direcRight = '+=';
    if(position.left => 499){
        var move = direcLeft + '500';
    }
    else {
        var move = direcRight + '500';  
    }
    $('.element').animate({marginLeft : move},500)
}
</script>

I haven't tested this code but it should move right to left and repeat as the distance, interval and animation interval have the same variable.

Upvotes: 1

Related Questions