jQuery function on hover

Question

I want to make a custom function that triggers when I hover an element. The usual (I think) solution for this would just to select the element and .hover(function) I want to create a function that looks like this:

name(element,inColor,outColor,time)
{
    element.hover(animate{color:inColor,duration:time},{animate:outColor,duration:time})
}

and just call this function on every element which I want to animate. Problem is I have to pin this to an event and can't just say

name($("a"),"#000","#fff",250);

I just can't figure out how to make the function trigger on hover. Is this possible and since it's a two liner, does it deserve a function on its own?

Answer 1

The problem here is with your syntax.

.hover() accepts two functions to complete onmouseenter and onmouseleave, respectively.

Let's take a look at your function:

element.hover(animate{color:inColor,duration:time},{animate:outColor,duration:time})

animate{...} is not the proper way to call the .animate() function. Also, duration should be outside the object, as it is not a CSS property (you're mixing up the two different ways of calling animate(): I'm assuming you want .animate(plainObject properties, duration time), but check the documentation I've linked to if you want the other one). It should look something more like this:

element.hover(function(){ $(this).animate({color:inColor,}, time); }, ... );

Now for the second part: {animate:outColor, duration:time}. This isn't going to work at all. What you're looking for is this:

function(){ $(this).animate({color:outColor}, time); }

Together:

element.hover(function(){ $(this).animate({color:inColor,}, time); }, function(){ $(this).animate({color:outColor,}, time); });

If you want a nicely formatted/readable version:

function name(element, inColor, outColor, time) {
    element.hover(function () {
        $(this).animate({
            color: inColor,
        }, time);
    }, function () {
        $(this).animate({
            color: outColor,
        }, time);
    });
}

Demo

Answer 2

Maybe this will help you:

function name(element,inColor,outColor,time) {
    element.hover(function(){
        $(this).animate({color:inColor}, time)
    },function(){
        $(this).animate({color:outColor}, time)
    });
}

name($("a"), "#000", "#fff", 250);