jQuery的点击事件，使div滑下来，并推动下一个div从视口

Question

我想弄清楚如何使jQuery幻灯片＃content2下来，并取而代之＃content1使它看起来像＃content1实际上是被＃content2推下来从视图中删除...

然后，同样的按钮被点击，使＃content2替换＃content1也需要做相反的效果，用＃content1替换＃content2让它们向上滑动，互相推开...

我并不是所有人都非常擅长jQuery，所以我确信我已经走过了这个错误的路，但这里是我试过的：

$(document).ready(function() { 
$('#click').click(function() { 
if($('#content1').is(':visible')) { 
    $('#content1').slideUp(); 
} 
else { 
    $('#content2').slideDown(); 
} 
}).click(function() { 
if($('#content1').is(':visible')) { 
    $('#content2').slideDown(); 
} 
else { 
    $('#content1').slideUp(); 
} 
}); 

}）;

Answer 1

您只需绑定点击一次，即可切换幻灯片效果。 你可以尝试这样的事情

$(document).ready(function() { 

    $('#click').click(function() { 
    $('#content1').slideToggle(); 
    $('#content2').slideToggle(); 
    } 
} 

Answer 2

现在你想两个click事件处理程序绑定到相同的元素。 这是不可能的，你尝试的方式，但与命名空间的事件，它是： $(#click).bind('click.event1')再后来.bind('click.event2')

但是你可以对所有功能于一体：

$(document).ready(function() { 
    // Pre selected for increased speed 
    var content1 = $('#content1'); 
    var content2 = $('#content2'); 

    $('#click').click(function() { 
     content1.slideToggle(); 
     content2.slideToggle(); 
    }); 
}); 

它不会在PERFEKT同步但可能看起来不错。