Простой метод jquery .hover () для каждого элемента класса

Question

не сделал много jquery и столкнулся с проблемой.Я хотел бы связать событие hover для всех элементов div с классом .social-tile.Я делаю это так:

$(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);
        });
    });
});

При наведении курсора на один элемент запускаются анимации для всех элементов div, и все они перемещаются одновременно.Я бы хотел анимировать только определенный элемент, над которым я наведите курсор.

Возможно, здесь действительно есть простое исправление, спасибо.

Answer 1

попробуйте это, извините - рабочая демонстрация здесь: http://jsfiddle.net/8vFAD/1/

$('.social-tile').live('mouseover', function(){
    $(this).animate({ 'margin-left': '15px'} ,500).animate({ 'margin-left': '30px'} ,500);
});

Answer 2

$(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);
    });
});

Answer 3

Хорошо, ваша переменная social_default, имеет в себе .socialtile, который будет вызывать все присвоенные ей элементы div, заменив это на (this).