Question

I’m trying to create an effect where I hover over a div (with the class “hover”) and 3 other divs (“agent”, “fav” and “more_details”) move upwards but with a short delay between the 3 of them. Then when I hover-out all 3 divs move down at the same time. Here is the code I’m currently trying,

jQuery(document).ready(function() {
jQuery(".hover").hover(
    function(){
    jQuery(".agent").animate({top: '-=32px'},400);
    },
    jQuery(".fav").animate({top: '-=32px'},400).delay(800);
    },
    jQuery(".more_details").animate({top: '-=32px'},400).delay(1600);
    },

    function(){
    jQuery(".agent,.fav,.more_details").animate({top: '+=32px'},400);
    }
);                              
});

Can anyone help me write my code correctly here please.

Answer 1

.delay delays the fx action that is chained to it, not one that it is chained to:

jQuery(".fav").delay(800).animate({top: '-=32px'},400);
jQuery(".more_details").delay(1600).animate({top: '-=32px'},400);