CODEWITHSUNDEEP
jqueryjquery-animate
Amesey
Amesey

Reputation: 852

jQuery animate div to slide down instead of show

I found a fiddle that comes close to doing what I need it to but instead of just showing the div I need it to animate the div's in and out on mouse over and when nothing is hovered the all disappear.

here's the jQuery...

$(document).ready(function(){
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide(); 
  $("#menu_container #menu_"+id[1]).show();
});
});

Here's is the fiddle http://jsfiddle.net/KUtY5/1/

Upvotes: 1

Views: 815

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

I recommend using data- attributes for the target elements to simplify the code (rather than use splitting of ID strings):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/KUtY5/360/

$(document).ready(function () {
    $("#nav a").mouseenter(function () {
        var $target = $($(this).data('target'));
        $("#menu_container div").not($target).slideUp();
        $target.slideDown();
    });
    $("#nav a").mouseleave(function () {
        $("#menu_container div").slideUp();
    });

});

If you move really fast over all the menu items, you can get multiple divs on top of each other. I also recommend using styling to place them all directly on top of each other instead to avoid this.

Also use stop to prevent the animations queuing up multiple times and bouncing divs open/closed:

$("#menu_container div").not($target).stop().slideUp();

and 

$("#menu_container div").stop().slideUp();

http://jsfiddle.net/TrueBlueAussie/KUtY5/361/

Upvotes: 1

Related Questions