jquery animation from current position
Question
I want the animations to start from the current position of the element, in this case: on the first click from 70% right and on the second click from the position the element is after the animation. (code will be appreciated)
$(document).ready(function(){ $( "button" ).click(function(){ screenWidth = Math.round($("html").width() /2) positionLeft = Math.round($(".container").offset().left) if ( positionLeft < screenWidth) { $(".container").css('right', "auto"); $(".container").animate({ left: "50%" }, 1000); } else if (positionLeft == screenWidth) { $(".container").css('left', "auto"); $(".container").animate({ right: "50%" }, 1000); } }); });
.container{ background-color:black; height: 50%; width: 20%; position: absolute; top: 30%; right :70%; }
<!doctype html> <html> <head> <title>debugging</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <button>click</button> </body> </html>
1 answers
solution1
0 2015-02-21 17:19:30
On button click, you wish to animate the left selector, so you set right% to auto (leaving left% also at auto), which jumps the element to left margin - where it would be with left/right both set to auto. Then the animation begins.
There are a few ways to solve this. One is to only animate the right selector and not the left (see jsFiddle demo at very bottom of answer).
Another is to swap them around. You just set right to auto - which leaves left also at auto. You must set right to auto and left to 10% (which is 100-70=30% minus width of container 20%, equals 10%). I did it this way in the in-answer embedded code to show you that when you switch back to animating the right percentage in the third button click, same problem happens.
Best solution is to just animate everything using one selector, left or right. Choose one and stick with it.
$(document).ready(function(){ $( "button" ).click(function(){ screenWidth = Math.round($("html").width() /2) positionLeft = Math.round($(".container").offset().left) if ( positionLeft < screenWidth) { $(".container").css({'right':"auto", 'left':'10%'}); $(".container").animate({ left: "50%" }, 1000); } else if (positionLeft == screenWidth) { $(".container").css({'left':"auto", 'right':'30%'}); $(".container").animate({ right: "50%" }, 1000); } }); });
.container{ background-color:black; height: 50%; width: 20%; position: absolute; top: 30%; right :70%; }
<!doctype html> <html> <head> <title>debugging</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <button>click</button> </body> </html>
And here it is animated just using the right selector: jsfiddle Demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.