0

我试图在这里解决一个问题。

以下 jQuery 脚本用于我的下拉菜单。

以下所有代码对我来说都很好，除了我遇到了一个障碍。

如果我单击 .drop class 'a' 链接之一来获取我的下拉菜单，它会出现下面代码中列出的所有动画。但不幸的是，当我点击另一个 .drop class 'a' 链接时，另一个下拉菜单并没有消失。

我尝试过使用 $("ul.dropdown").hide();，但这会if(theDropState){ .. }通过使其立即消失来取消动画。

任何人都可以帮我找到一个让它隐藏起来的解决方案，但是在if(theDropState){ .. }动画完成之后？

我试过放$("ul.dropdown").hide();一个回调函数，但这也没有用。

    $(".drop").click(function(event) {
  var theDrop = $(this).next("ul.dropdown");
  theDropState = theDrop.is(':visible');

  if(theDropState){ 
    theDrop.stop(true,true).animate({ height: 'hide' }, '200'); 
    $('#header').stop(true,true).animate({ height: '50px' }, '200', function(){
          $("ul.dropdown").hide();
    });
  }
  else if(!theDropState){
    theDrop.stop(true,true).animate({ height: 'show', opacity: 'show' }, '200') 
    $('#header').stop(true,true).animate({ height: '100px' }, '200') 
  }

任何和所有的帮助将不胜感激。

4

2 回答 2

0

使用回调

$('#foo').animate({height: '200px'}, 200, function(){ /*  do stuff */ });
于 2012-06-05T07:53:10.647 回答
0

jQuery animate完成后可以获得回调函数。只需将您想要在回调中执行的任何内容传递给它。

.animate({ height: '50px' }, '200', function() {
  // do stuff here 
 });
于 2012-06-05T07:53:50.127 回答