CODEWITHSUNDEEP
jquery
denislexic
denislexic

Reputation: 11392

Jquery div is moved the the browser still thinks the mouse is over

I'm developing a website for my brother (those are not his pictures, they are random ones): http://dev.denisduvauchelle.com/eric/2012/

And I have an issue when I move the div in a jquery animation to the top of the page, and the browser still thinks the cursor is above the div making another animation, which is shouldn't.

Here are the steps to re-create it: 1. Load the page 2. Click the logo 3. Move the mouse just a little bit ----> You'll see the menu drop downs and back up really quickly

That animation is suppose to happen once the user mouse hovers the white box around the logo. So I'm guessing the browser still thinks that the mouse is over the box and making the animation, what kind of solution can I find for this?

Thanks and please let me know if I am not clear.

Here is the code for when the user clicks the logo:

    $('#logo').live('click',function(){ 
        var attr = $(this).attr('title'); 
        if(attr === "Enter"){ 
            stop_fullscreen_flicker();
            $('#header_first').fadeOut(speedNormal);
            $("header").delay(500).animate({
                "top" : spacing_header+'px'
            }, 'slow').css("backgroundColor","#FFF");
            $(this).attr('title','');
            $("#header_work").delay(1000).slideToggle('fast', function(){
                // Load the first project
                var first_loaded_project = $('#first_loaded_project').val();
                $('#link_'+first_loaded_project).addClass('external');
                $('#link_'+first_loaded_project).trigger('click');
            });
        } else {
            set_href('about');
            $("#content").fadeOut('fast',function(){
                $("#header_work ul").slideUp('fast');
                $('#backstretch').hide();
                $("#about").fadeIn('fast');
                $("#about").addClass('on');
                set_href('about');
            });
        }
        return false;
    });

and here is the code for mouse over :

    $('#header_work h1').live('mouseenter',function(){
        $("#header_work ul").slideDown('fast');
    });

    $('header').live('mouseenter',function(){
        $('#header_work h1').addClass('h1active');
        var attr = $('#logo').attr('title'); 
        if(attr !== "Enter"){ 
            $("#header_work ul").slideDown('fast');
            var img_src = "a_img/take-a-chance.jpg";
            $('#backstretch').hide();
            $.backstretch(img_src);
            $('#content').hide();
            $('#backstretch').show();
        }
    });

Here is a jsfiddle for you to try out thanks to Sheikh Heera: http://jsfiddle.net/kRs7Q/10/

Upvotes: 1

Views: 167

Answers (1)

The Alpha
The Alpha

Reputation: 146239

Does this help ?

$('header').on('hover', function(){
    $("#header_work ul").slideToggle('fast');
},function(){
    $("#header_work ul").slideToggle('fast');
});

Upvotes: 1

Related Questions