jquery - 不同元素上一系列 jQuery 动画的整洁代码？

Question

我目前正在使用这段代码，它做我想做的事

$('#about-link').click(function() {
    $('#login').fadeOut(function(){
        $('#about').fadeIn(function() {
            $('#about').one('click', function() {
                $('#about').fadeOut(function(){
                    $('#login').fadeIn();
                });
            });
        });
    });
    return false;
})

然而，那里的嵌套数量是疯狂的。有没有办法以一种不那么嵌套的方式来写这个？

Answer 1

$('#about-link, #about').on('click', function() {
    var el = this.id == 'about-link' ? 'login' : this.id;
    show_hide(el);
    return false;
});

function show_hide(el){
 var arr = ['login', 'about'],
     t = arr.indexOf(el) == 0 ? 1 : 0;
    $('#' + el).fadeOut(function() {
       $('#' + arr[t]).fadeIn();
    });
}
​

演示

Answer 2

您可以将 .one('click') 从嵌套函数中移出，从而减少一个内部函数。

$('#about-link').click(function() {
    $('#login').fadeOut(function(){
        $('#about').fadeIn().one('click', function() {
            $(this).fadeOut(function(){
                $('#login').fadeIn();
            });
    });
    return false;
});

Answer 3

.queue()完全符合我的要求。很干净：

var about = $('#about');
$('#login')
    .fadeOut()
    .queue(function(next) { about.fadeIn(next);       })
    .queue(function(next) { about.one('click', next); })
    .queue(function(next) { about.fadeOut(next);      })
    .fadeIn();

哎呀，如果您愿意放弃浏览器支持，它甚至会被缩短：

var about = $('#about');
$('#login')
    .fadeOut()
    .queue(about.fadeIn.bind(about))
    .queue(about.one.bind(about, 'click'))
    .queue(about.fadeOut.bind(about))
    .fadeIn();