每个类元素的简单 jquery .hover() 方法答案

【问题标题】：Simple jquery .hover() method for each class element每个类元素的简单 jquery .hover() 方法
【发布时间】：2011-07-27 23:46:04
【问题描述】：

没有做太多 jquery 并遇到了问题。我想将所有 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 的动画都会被触发，它们会同时移动。我只想为我悬停的特定元素设置动画。

这里可能有一个非常简单的解决方法，谢谢。

【问题讨论】：

标签： jquery hover jquery-animate each

【解决方案1】：

试试这个，对不起 - 在这里工作演示： http://jsfiddle.net/8vFAD/1/

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

【讨论】：

感谢您的努力，但仍然没有运气 - 它们都作为一个整体移动。

【解决方案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);
    });
});

【讨论】：

谢谢，但它们仍然同时触发。
立即尝试（我们没有您的 HTML，所以这都是猜测）。我已经修改它以将“默认”边距存储到数据属性中，然后通过读取该属性来恢复它。 .social-tile 是否有可能是一个容器对象，而不是一个单独的图块？ HTML 会很有帮助。
感谢您的帮助，我遇到了 css 问题，我已修复，实施您的解决方案，一切正常。

【解决方案3】：

好的，你的变量 social_default，其中有 .socialtile，它将调用分配给它的所有 div，将其更改为 (this)。

【讨论】：