Simple jquery .hover() method for each class element

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.

ezmilhouse · Answer 1 · 2011-04-01T21:21:38.703

3

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

edited Apr 01 '11 at 21:21

answered Apr 01 '11 at 21:13

ezmilhouse

8,933
7
29
38

Thank you for your effort, but still no luck - they all move as one. – Mikk Apr 01 '11 at 21:16

Ken Redler · Accepted Answer · 2011-04-01T21:17:43.917

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

edited Apr 01 '11 at 21:17

answered Apr 01 '11 at 21:09

Ken Redler

23,863
8
57
69

Thank you, but they all still trigger at same time. – Mikk Apr 01 '11 at 21:12
Try it now (we don't have your HTML so this is all guesswork). I've modified it to store the "default" margin into a data attribute, then restore it by reading from that attribute. Is it possible that `.social-tile` is a container object, and not an individual tile? HTML would be helpful. – Ken Redler Apr 01 '11 at 21:18
Thank you for your help, I had a problem with css, I fixed it, implemented your solution and everything worked fine. – Mikk Apr 01 '11 at 21:22

PHP · Answer 3 · 2011-04-01T21:16:27.023

0

Ok your variable social_default, has .socialtile in it, which will call to all the divs assigned to it, change that to (this).

edited Apr 01 '11 at 21:16

answered Apr 01 '11 at 21:06

PHP

216
2
9

Simple jquery .hover() method for each class element

3 Answers3

Linked