70 posts
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
sergiupopa says

I’m using this script to animate some images inside anchors:

$('#locations a').each(function() {
        // set opacity 0 and take initial position
        $(this).css('opacity', '0');
        var left = $(this).css('left');
        var top = $(this).css('top');

        // reset position and animate
        $(this).css({'left' : '0', 'top' : '0'});
        $(this).animate({left: left, top: top, opacity: 1});
    });

I need to use the jquery each() function to take the initial position. However, I want to animate the returned elements in order. Is that possible?

136 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Italy
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Raspo says
70 posts
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
sergiupopa says

Exactly like that. I need though to take the css values and after that animate the element. I just don’t see how…

443 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 1 000 and 5 000 dollars
  • United States
SplitV says

Try removing the call to animate from the function passed to ‘each’. Then cache(catch) the returned value from each and then follow the steps on that link using the cached objects that were returned from the call to each.

var objs = $('#locations a').each(function() {
 // set opacity 0 and take initial position 
$(this).css('opacity', '0'); 
var left = $(this).css('left'); 
var top = $(this).css('top');
 // reset position and animate
 $(this).css({'left' : '0', 'top' : '0'});

//Store data
$(this).data( 'oleft', left );
$(this).data( 'otop', top );

 }); 

i=0;

(function() {  
  $(objs[i++] ).animate({left:objs[i].data('oleft'), top: objs[i].data('otop'), opacity: 1}); 
})();

70 posts
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
sergiupopa says

I got it with custom queue:

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top'),
        a = $(this).css({opacity: 0, left: 0, top: 0});

    $(document).queue('myQueue', function(n) {
      a.animate({left: left, top: top, opacity: 1}, n);
    });
});
$(document).dequeue('myQueue');
Thanks!
136 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Italy
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Raspo says
I got it with custom queue:
$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top'),
        a = $(this).css({opacity: 0, left: 0, top: 0});

    $(document).queue('myQueue', function(n) {
      a.animate({left: left, top: top, opacity: 1}, n);
    });
});
$(document).dequeue('myQueue');
Thanks!

Nice code!

by
by
by
by
by
by