Question

I’m using the “animateWithCss.js” plugin and the following code to animate the box-shadow property in a form I’m using:

$("input, textarea").hover(function(){
    $(this).animateWithCss({boxShadow: "0px 0px 8px #11E1DC"}, {duration: 200});
    }, function()   {
    $(this).animateWithCss({boxShadow: "0px 0px 0px #0080FF"}, {duration:100});
});

$("input, textarea").focus(function() {
    $(this).animateWithCss({boxShadow: "0px 0px 4px #0080FF, 0px 0px 4px #0080FF, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC"}, {duration: 200});
    });

$("input, textarea").blur(function(){
    $(this).animateWithCss({boxShadow: "0 0 0 #000"})
});

This works just as I want it to, except for the fact that the “.hover” function is removing the animation from the “.focus” animation, and I would like the animation to not change if an input or textarea is focused and the user hovers over the focused area. Can’t seem to figure this one out. Any help is appreciated!

Answer 1

You can use

$("yourObject").is(":focus")

to check if an object is focused, preventing the hover effect in case of focus.
Of course it would work with other classes (active, hover, etc.).

This is all you need to accomplish what you are trying to achieve.

EDIT:
Maybe I was too inaccurate. Here’s the full working code:

$("input, textarea").hover(function(){
    if ($(this).is(":focus")) { // Check if your object is being focused
       // Do nothing, do not activate hover effect
    }
    else { // Activate the effect
       $(this).animateWithCss({boxShadow: "0px 0px 8px #11E1DC"}, {duration: 200});
    }
}, function()   {
    if ($(this).is(":focus")) { // Check if your object is being focused
       // Do nothing, do not activate hover effect
    }
    else { // Activate the effect
       $(this).animateWithCss({boxShadow: "0px 0px 0px #0080FF"}, {duration:100});
    }
});


$("input, textarea").focus(function() {
    $(this).animateWithCss({boxShadow: "0px 0px 4px #0080FF, 0px 0px 4px #0080FF, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC"}, {duration: 200});
    });

$("input, textarea").blur(function(){
    $(this).animateWithCss({boxShadow: "0 0 0 #000"})
});