CODEWITHSUNDEEP
javascriptjqueryhtml
Josue Espinosa
Josue Espinosa

Reputation: 623

fadeIn(); fades in then out then back in?

jsfiddle:

http://jsfiddle.net/ZcbUW/

When you hover from the top of the blue div and dont move your mouse, the text fades in, out, then in. I have no idea why.

<html>

Upvotes: 0

Views: 64

Answers (2)

Leeish
Leeish

Reputation: 5213

$("#menu, #arrow").mouseenter(function () {
    $('#arrow').stop(true, false).fadeOut("fast");
    $("body").children(':not(#menu)').children(':not(#arrow)').css("-webkit-filter", "blur(2px)");
    $("#menu").stop().animate({
        width: "300px"
    }, 300, function () {
        $('.text').fadeIn(200);
    });
})
$("#menu").mouseleave(function () {
    $("#menu").stop().animate({
        width: "5px"
    }, 300, function () {
        $('#arrow').stop(true, false).fadeIn("slow");
    });
    $("body").children(':not(#menu)').css("-webkit-filter", "none");
    $('.text').fadeOut(100);
});

Your selector is weird. So hover is firing on both the menu and the arrow. Try this: http://jsfiddle.net/ZcbUW/2/

Upvotes: 3

F__M
F__M

Reputation: 1598

Remove this line:

$('.text').fadeOut(100);

Works for me with your example.

Upvotes: 0

Related Questions