如何在jquery中链接这些效果?队列?诺言?

时间:2013-10-21 18:51:26

标签: javascript jquery

我有这两个未连接的函数,至少没有办法进行回调。我首先希望列表向上滑动,然后向下滑动。为了使其实际工作,至少在某种程度上,我添加了delay()

我无法创建fsFiddle,因为代码过于复杂且<a>中都包含href,但您可以在此处查看工作示例:http://liebdich.biz/

这里有什么工作以及如何:queuepromise

$('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);
    }
 });

很抱歉,但由于导航中的所有<a>都有href,我无法成为jsFiddle。

3 个答案:

答案 0 :(得分:1)

使用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);
    });
});

我用一些代码编辑了我的代码。我仍然认为你需要使用回调函数来解决你的问题。

答案 1 :(得分:1)

这是使用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);
        });
    }
});

答案 2 :(得分:0)

$('a').not(this).parent().find('ul').slideUp(500, function() {
    $(this).parent().find('ul').delay(500).slideDown(500);
});