Simple jquery .hover() method for each class element
10,964
Solution 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);
});
});
Solution 2
try this, sorry - working demo here: http://jsfiddle.net/8vFAD/1/
$('.social-tile').live('mouseover', function(){
$(this).animate({ 'margin-left': '15px'} ,500).animate({ 'margin-left': '30px'} ,500);
});
Comments
-
Mikk almost 2 years
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.