我目前正在使用此代码,它可以实现我想要的
$('#about-link').click(function() {
$('#login').fadeOut(function(){
$('#about').fadeIn(function() {
$('#about').one('click', function() {
$('#about').fadeOut(function(){
$('#login').fadeIn();
});
});
});
});
return false;
})
然而,筑巢的数量是疯狂的。有没有办法以较少嵌套的方式写这个?
答案 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();