一系列jQuery动画在不同元素上的整洁代码?

时间:2012-05-13 08:03:17

标签: jquery jquery-animate

我目前正在使用此代码,它可以实现我想要的

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

然而,筑巢的数量是疯狂的。有没有办法以较少嵌套的方式写这个?

3 个答案:

答案 0 :(得分:0)

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

<强> DEMO

答案 1 :(得分:0)

你可以从嵌套函数中移出.one('click'),除了少一个内部函数。

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

答案 2 :(得分:0)

.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();