Geek asks and answers

Jquery animation from right to left

I'm trying to make an animation (please tell me if my approach is correct) using css sprites, check the 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 fine (from right to left and from left to right), but there is a small problem, css sprite does not work as expected. His only take of this property.css("background-position","0 -68px")

+3
source share
2 answers

This is because you apply all 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 animation is complete?

try the following:

 $(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/

. , , , . , .

+1

Hiya, , :) . : http://jsfiddle.net/UzLxZ/9/show/  & & : http://jsfiddle.net/UzLxZ/9/ &&, : http://jsfiddle.net/5dqwP/1/

http://jsfiddle.net/UzLxZ/20/show/ (, ) http://jsfiddle.net/UzLxZ/21/show/ && & & http://jsfiddle.net/UzLxZ/20 ; .:)

http://jsfiddle.net/8sVDE/ - .

** http://archive.plugins.jquery.com/project/Pause-Resume-animation ** JQuery

, .

, : ( )

, jsfiddle , , .. - " , 1 ( , )"

, , , !

JQuery

$(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(); 

});
​
+1

More articles:


All Articles