Question

haven’t done much jquery and ran into a problem. I’d like to bind hover event for all div’s with class .social-tile. I do it like this:

$(function(){
    var social_default = $('.social-tile').css('margin-right');
    $('.social-tile').each(function(){
        $(this).hover(function(){
            $(this).animate({
                'margin-right': '0px' 
            },500);
        },function(){
            $(this).animate({
                'margin-right': social_default 
            },500);
        });
    });
});

When I hover over one element, animations for all divs are triggered and they move all at one time. I’d like to animate only specific element which I hover.

Probably there is a really easy fix here,
thank you.

Answer 1

$(function() {
    $('.social-tile').hover(
    function() {
        $(this).data('prev-margin-right', $(this).css('margin-right') );
        $(this).animate({
            'margin-right': '0px'
        }, 500);
    }, function() {
        $(this).animate({
            'margin-right': $(this).data('prev-margin-right')
        }, 500);
    });
});