CODEWITHSUNDEEP
jqueryhtmlcss
Chuck Le Butt
Chuck Le Butt

Reputation: 48758

jQuery: Mouseover DIV effect

Apologies for the newbishness of my question, I'm still getting used to jQuery. I wish to do the most simple of effects. One which I've seen on a ton of different websites. Basically just that when a mouse hovers over an email, text appears above it.

I've attempted to make something using jsFiddle, but it's not behaving how I'd expect it to at all. You can see the effect I'm going for, though: http://jsfiddle.net/5dyrJ/

$(function() {
    $('#main').on("mouseover", function (){
        $("#slider").animate({"right":"-30%"}, "slow");
    }).on("mouseout", function (){
        $("#slider").animate({"right":"-99%"}, "fast");
    });
});

Can someone please explain how to efficiently get this effect?

Upvotes: 1

Views: 1385

Answers (3)

dsgriffin
dsgriffin

Reputation: 68566

Problem:

The cause of your current problems are that mouseover()/mouseout() will trigger on entering/leaving child elements.

Solution:

You'd use mouseenter() and mouseleave() instead in this case (or the shorthand hover()):

$(function() {
    $('#main').on("mouseenter", function (){
        $("#slider").animate({"right":"-30%"}, "slow");
    }).on("mouseleave", function (){
        $("#slider").animate({"right":"-99%"}, "fast");
    });
});

Your jsFiddle here.

Why does this work?

This works because mouseenter()/mouseout() do not trigger when entering/leaving child elements. Here is a great example jsFiddle showing the differences between mouseover/mouseenter.

Also note that, as @adeneo as shown in his jsFiddle, your example can actually be done just using CSS by combining transitions and the :hover state.

Upvotes: 3

Praveen
Praveen

Reputation: 56501

Try using .hover()

DESCRIPTION: Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

$(function() {
    $('#main').hover(function() {
        $("#slider").animate({"right":"-30%"}, "slow");
    }, function (){
        $("#slider").animate({"right":"-99%"}, "fast");
    });
});

JSFiddle

Upvotes: 1

Rwd
Rwd

Reputation: 35170

Try this:

$(function() {
$('#main').on("mouseover", function (){
    $("#slider").animate({"right":"-30%"}, "slow");
}).on("mouseleave", function (){
    $("#slider").animate({"right":"-99%"}, "fast");
});
});

Hope this helps!

Upvotes: 0

Related Questions