每个类元素简单的jquery .hover（）方法 [英] Simple jquery .hover() method for each class element

问题描述

没有做太多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的动画都会被触发，并且它们一次全部移动。

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

$ div class =h2_lin>解决方案

  $（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）; 
}）; 
}）; 
  

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.

解决方案

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

这篇关于每个类元素简单的jquery .hover（）方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！