我有两个不连接的函数,至少没有办法进行回调。我首先希望列表向上滑动,然后向下滑动另一个。为了使它实际工作,至少,不知何故,我添加了delay()
.
我无法制作 fsFiddle,因为代码太复杂并且所有<a>
都有一个href
,但您可以在此处看到工作示例:http://liebdich.biz/。
这里的工作是什么以及如何做:queue
,promise
?
$('a').click(function(e){
e.preventDefault();
$(this).parent().find('ul').delay(500).slideDown(500);
$('a').removeClass('bold');
$(this).addClass('bold');
if ($(this).is('ul ul a')) {
return;
} else {
$('a').not(this).parent().find('ul').slideUp(500);
}
});
抱歉,但我无法制作 jsFiddle,因为导航中的所有<a>
都有一个href
.
这是使用 promise 对象以避免获得重复回调的合适位置:
$('a').click(function (e) {
e.preventDefault();
var $this = $(this);
$('a').removeClass('bold');
$this.addClass('bold');
if ($this.is('ul ul a')) {
$this.parent().find('ul').slideDown(500);
return;
} else {
$('a').not(this).parent().find('ul').slideUp(500).promise().done(function(){
$this.parent().find('ul').slideDown(500);
});
}
});
使用 Jquery,通常对于动画,您有一个回调函数,一旦动画完成,就会调用该函数。以下是slideUp的文档: http://api.jquery.com/slideUp/
如您所见,如果您使用两个参数,第二个参数与动画完成后调用的完整函数有关。
$('a').click(function(e){
var _link = $(this);
$('a').not(_link ).parent().find('ul').slideUp(500, function() {
$(_link).parent().find('ul').delay(500).slideDown(500);
});
});
我用你的一些代码编辑了我的代码。我仍然相信您需要使用回调函数来解决您的问题。
$('a').not(this).parent().find('ul').slideUp(500, function() {
$(this).parent().find('ul').delay(500).slideDown(500);
});