CODEWITHSUNDEEP
jqueryright-to-left
seoppc
seoppc

Reputation: 2824

jquery animation from right to left

I am trying to make an animation(Please tell me if my approach is correct) with using css sprites, please check following jquery code...

$(document).ready(function() {
    setTimeout("boat()",20);
});
function boat(){
    $("#boat").animate({right:"+=110%"},20000).css("background-position","0 0").animate({left:"+=110%"},20000).css("background-position","0 -68px")
    setTimeout("boat()",20000);
}

css: 

#boat {
    margin-top:160px;
    position:absolute;
    margin-left:100%;
    width:150px;
    height:68px;
    background-image:url(plane.png);
    background-repeat:no-repeat;
}

Animation works perfect(Right to left and left to right) but there is small issue, css sprite is not working as expected. Its only taking this property .css("background-position","0 -68px")

Upvotes: 3

Views: 1934

Answers (2)

Tats_innit
Tats_innit

Reputation: 34107

Hiya as you mentioned above to post my answer :) see this: http://jsfiddle.net/UzLxZ/9/show/ && code in here : http://jsfiddle.net/UzLxZ/9/ && and my previous start up was this: http://jsfiddle.net/5dqwP/1/

this another version for you exact need http://jsfiddle.net/UzLxZ/20/show/ (wait the blue box goes out of the screen and come back) or http://jsfiddle.net/UzLxZ/21/show/ && code in http://jsfiddle.net/UzLxZ/20 here; you can play around and make it pretty. :)

further edit

http://jsfiddle.net/8sVDE/ - this might give you more ideas.

** http://archive.plugins.jquery.com/project/Pause-Resume-animation OR ** The way to stop and continue animation while mouseover and mouseout in JQuery

has exact idea what you are looking for.

Hope this helps: (on mouse over the blue box you will get one full repetition)

So, this jsfiddle shows you exactly what you want i.e. quoting - "i want to pause then resume on mouseover and stop after 1 successful run(means completing full function, right to left and left to right) "

Please let me know if this helps and have a nice one, cheers!

Jquery code

$(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=100%"},1000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=100%"},1000).stop();
    });
   // alert('foo');
}



$("#boat").mouseover(function(){
   boat(); 

});
​

Upvotes: 1

rucsi
rucsi

Reputation: 516

It is because you apply everything in one. .css("background-position","0 0") and .css("background-position","0 -68px") What do you want to achieve? shouldn't it be a callback when the animations is finished?

try this: 

 $(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=110%"},10000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=110%"},10000, boat);
    });
}

you can check it here : http://jsfiddle.net/7GV9G/20/

this will be continuous. right to left than left to right than again, loop forever. if you don't want it just once, remove the boat callback from the second animation.

Upvotes: 1

Related Questions