继续执行一个功能

Question

我很难在一个刚刚完成后让另一个功能工作。我的代码的前半部分起作用，但之后的功能不起作用。我究竟做错了什么？

的HTML

<div id="feature"> 
    <div id="open"></div> 
</div> 

的CSS

#feature { 
    position:relative; 
    width:100%; 
    height:450px; 
} 
#open { 
    position:relative; 
    width:100%; 
    height:200px; 
    background:red; 
} 

jQuery的

$('#open').click(function() { 
    $(this).animate({ 
     height: 50 
    }, { 
     duration: 'slow' 
    }).css('overflow', 'visible'), 
    function() { 
     $('#open').animate({ 
      height: 200 
     }, { 
      duration: 'slow' 
     }) 
    }; 
    // Animation complete. 
}); 

一个JS提琴。

http://jsfiddle.net/C8fA7/

Answer 1

功能需要有一个参数animate，但你把它css后，你已经完成了调用animate很久以后。试试这个：

$(this).animate({ 
    height: 50 
}, { 
    duration: 'slow' 
}, function() { 
    $('#open').animate({ 
     height: 200 
    }, { 
     duration: 'slow' 
    }) 
}).css('overflow', 'visible'); 

这变得更清晰，如果我们作出明确的链接：

var temp = $(this); 
temp = temp.animate({ height: 50 }, { duration: 'slow' }); 
temp = temp.css('overflow', 'visible'); 

在这一点上，你只是离开了这个流浪功能：

function() { 
    $('#open').animate({ height: 200 }, { duration: 'slow' }); 
} 

有没有语法错误，但它什么都不做，因为它从来没有被调用过。

此外，您的评论// Animation complete表示您可能没有意识到动画是异步的。当您完成animate声明时，动画已开始，但尚未完成。您的回调函数将在动画完成时调用; animate呼叫之后的陈述将不会等待。