javascript - Animate an element in real time -

javascript - Animate an element in real time -

i need know position of img in real time in order alter position while going or down. target animate bottom 40px @ origin , animate top later.

my code following:

var pos = $('header img').offset().top; if( pos == 0) { $('header img').animate({"top": "+=40px"}, 6000); }else{ $('header img').animate({"top": "-=40px"}, 6000); }

any idea?

you can utilize progress alternative observe position live. made changes don't have utilize much duplicated code:

$('#startanimation').on('click', function () { var pos = $('header #img').offset().top; if (pos == 0) { doanimate("+=40px"); } else { doanimate("-=40px"); } }); function doanimate(to) { $('header #img').animate({ top: }, { duration: 6000, progress: function (promise) { console.log('offset top: ' + $('header #img').offset().top); } }); }

fiddle: http://jsfiddle.net/z3jk1g0z/

you alter utilize start , complete options in animate. more information: http://api.jquery.com/animate/

edit: wrong fiddle

javascript jquery jquery-animate