Magic CSS3 animations not working properly when adding with jQuery

Question

I'm trying to use some magic css classes in some code (http://www.minimamente.com/magic-css3-animations/) and trying to add them with jquery with mouseenter and mouseleave however its not working... at all!

Below is the code i have tried

$(document).ready(function(){
    $('#banner-holder').on('mouseenter', function(){
        $(this).find('#prev, #next').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function(){
        $(this).find('#prev, #next').removeClass('perspectiveLeft');
        $(this).find('#prev, #next').addClass('perspectiveLeftRetourn');
    });
});

It triggers the perspectiveLeft, but on mouse out it doesnt do the perspectiveLeftRetourn. Am i making a simple mistake?

Unfortunately not as it's locally hosted and a work site so i'm not able to post code at the moment. Kinda sucks — Andy Holmes
– Andy Holmes, Commented Jul 23, 2013 at 9:40
Why do you need $(this).find('#prev, #next'). Isn't $('#prev, #next') enough ? — nubinub
– nubinub, Commented Jul 23, 2013 at 9:40
2 secs guys i'm just sorting a fiddle. And yes you're right .find() isnt needed — Andy Holmes
– Andy Holmes, Commented Jul 23, 2013 at 9:42

Novocaine · Accepted Answer · 2013-07-23 10:31:15Z

1

Here's a fiddle

seems to work fine with the following

$(document).ready(function () {
    var els = $('#prev, #next');
    $('#banner-holder').on('mouseenter', function () {
        els.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function () {
        els.removeClass('perspectiveLeft').addClass('perspectiveLeftRetourn');
    });
});

Edit: You may also want to remove the class perspectiveLeftRetourn when you mouseenter.

edited Jul 23, 2013 at 10:31

answered Jul 23, 2013 at 9:47

Novocaine

4,8064 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Andy Holmes Over a year ago

i've tried this but it's not working for me -.- i'll debug my code, give me 15 mins :)

Novocaine Over a year ago

have you got duplicate ids of prev, next or banner-holder? That would cause problems.

Andy Holmes Over a year ago

This code still isn't working for me. Works fine on your fiddle but not for me. Also, it only applys the animation once, i need it to be able to do it everytime the mouse is over the banner holder

Novocaine Over a year ago

Do you get any JS errors? Can you post your html structure. I don't know what else to suggest without seeing more of your code.

Novocaine Over a year ago

just updated the fiddle/answer. jsfiddle.net/PcsNH/6 it's not perfect if you mouse in/out quickly, but at least it does it more than once :)

|

nubinub · Accepted Answer · 2013-07-23 09:48:39Z

0

$(document).ready(function(){
    $('#banner-holder').hover( function(){
        $('#prev, #next').addClass('magictime perspectiveLeft');
    },function(){
        $('#prev, #next').removeClass('perspectiveLeft');
        $('#prev, #next').addClass('perspectiveLeftRetourn');
    });
});

Maybe this will work better.

answered Jul 23, 2013 at 9:48

nubinub

1,9382 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Magic CSS3 animations not working properly when adding with jQuery

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related