jqueryslidetogglefadeto

fadeTo and slideToggle behving oddly


Or rather, with my limited knowledge I can't figure out what I've done wrong in order that it's behaving this way.

I have a div that contains a contact form. The div is hidden, but when a user hovers over 'contact' in the nav bar, the div slides down to reveal the form. The client would like to have the word 'contact' display for .5 seconds in that space - then fade out - then have the form fade in.

My problem is that when the user moves their cursor to hover over the form (as inevitably they will), it fades out and then fades in again quickly - this behavior seems to disrupt the flow of sequential animations and cause other odd behavior, as well.

Wondering if someone may be so kind as to point out my error.

I'll add my js below, and I've set up a fiddle here: http://jsfiddle.net/zMdw6/

$(function () {
    $(document).on("mouseenter", "#the-menu-item, .the-hidden-div", function () {
        $(".the-hidden-div").stop().slideDown(500, function() {
            $(".the-word").stop().fadeTo(200, 0, function() {
                $(".the-form").fadeTo(200, 1)
            });
        });
    });

    $(document).on("mouseleave", "#the-menu-item, .the-hidden-div", function () {
        $(".the-form").stop().fadeTo(500, 0, function() {
            $(".the-hidden-div").stop().slideToggle(500, function() {
                $(".the-word").fadeTo(1000, 1)
            });
        });
    });
});

css:

.the-hidden-div {display: none;}
.the-word {opacity: 1;}
.the-form {opacity: 0;}

As always, any help is greatly appreciated. Thanks!


Solution

  • I changed your mouseleave function. Here's an update to your jsfiddle.

    $(function () {
    $(document).on("mouseenter", "#menu-item-471, .dropdown-contain", function () {
        $(".dropdown-contain").stop().slideDown(500, function() {
                $(".big-intro").stop().fadeTo(200, 0, function() {
                     $(".dc-content").fadeTo(200, 1)
                  });
        });
    });
    
    $("#menu-item-471, .dropdown-contain").not('#menu-item-471').mouseleave(function () {
        $(".dc-content").stop().fadeTo(500, 0, function() {
            $(".dropdown-contain").stop().slideToggle(500, function() {
                 $(".big-intro").fadeTo(1000, 1)
                });
        });
    });
    });