CODEWITHSUNDEEP
jquery
Nazir Hussain
Nazir Hussain

Reputation: 41

jquery-Slide Effect not consistent and happening too many times with jquery 1.7

I am using "jquery-1.7.1.min.js" , what I want is when I enter into some menu the dropdown should slide down smoothly but its not happening continuously.It is very inconsistent and sometime shows nothing and sometimes it continues to slideup and slidedown. Please help me out of it.

I am using below code

Html : 

<nav>
    <ul class="menuList">
      <li><a href="#">Main Menu</a>
        <div class="submenu">
          <div class="submenuInner">
            <div class="menus clearfix">
           <ul class="firstlist">
                <li><a href="">Sub Menu Left 1</a></li>
                <li><a href="">Sub Menu Left 2</a></li>
                <li><a href="">Sub Menu Left 3</a></li>
                <li><a href="">Sub Menu Left 4</a></li>
                <li><a href="">Sub Menu Left 5</a></li>
           </ul>
           <ul>
                <li><a href="">Sub Menu Right 1</a></li>
                <li><a href="">Sub Menu Right 2</a></li>
                <li><a href="">Sub Menu Right 3</a></li>
                <li><a href="">Sub Menu Right 4</a></li>
                <li><a href="">Sub Menu Right 5</a></li>
              </ul>
           </div>
          </div>
        </div>
      </li>
    </ul>
</nav>

script :

$(document).ready(function() {
$(".menuList li").mouseenter( function() {
        $(this).find(".submenuInner").stop().css({"margin-top":"0"});
    $(this).children(".submenu").slideDown("slow");
    });

    //console.log("menuin");

    $(".menuList li").mouseleave( function() {
        $(this).children(".submenu").slideUp("slow");
        //$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
        $(this).find(".submenuInner").animate({marginTop:"-100%"},500);
    });
});

Upvotes: 0

Views: 180

Answers (2)

Shakti Patel
Shakti Patel

Reputation: 3862

can you please used this code : Demo

 $(document).ready(function () {
    $(".menuList li").hover(
        function () {
            $(this).find(".submenuInner").stop(true, true).css({
                "margin-top": "0"
            });
            $(this).children(".submenu").slideDown("slow");
        },
        function () {
            $(this).children(".submenu").slideUp("slow");
            $(this).find(".submenuInner").animate({
                marginTop: "-100%"
            }, 500);
        }
    );
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function() {
    $(".menuList li").mouseenter( function() {
        $(this).find(".submenuInner").stop(true, true).css({"margin-top":"0"});
        $(this).children(".submenu").stop(true, true).slideDown("slow");
    });

    //console.log("menuin");

    $(".menuList li").mouseleave( function() {
        $(this).children(".submenu").stop(true, true).slideUp("slow");
        //$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
        $(this).find(".submenuInner").stop(true, true).animate({marginTop:"-100%"},500);
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions