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

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

Answer 2

$('#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 3

ネストされた関数から .one('click') を移動して、内部関数を 1 つ減らすことができます。

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