jQuery隐藏一个div显示另一个

Question

我有以下网站：http://driz.co.uk/taschen/

我想要这样做，当用户点击切换div时，当前显示的ipad淡出而另一个ipad淡入。反之亦然。

如何使用jQuery执行此操作？感谢。

Answer 1

您可以使用.toggle()在功能之间切换，如下所示：

$("#toggle").toggle(function() {
  $("#ipad-portrait").fadeOut(function() { $("#ipad-landscape").fadeIn(); });
}, function() {
  $("#ipad-landscape").fadeOut(function() { $("#ipad-portrait").fadeIn(); });
});

或者，使用.click()（有几种方法，这是其中之一）：

$("#toggle").click(function() {
  var ipads = $("#ipad-portrait, #ipad-landscape"), 
      current = ipads.filter(":visible").fadeOut(function() {
                  ipads.not(current).fadeIn();
                });
});

Answer 2

$("#toggle").click(function() {
    $("#ipad-landscape, #ipad-portrait").toggle();
});

<啊>啊哈，你想要褪色......

Answer 3

您可以使用jQuery 1.4.4 中添加的fadeToggle()功能（您需要从该页面上使用的1.4.2版脚本更新到此版本）：

$('#toggle').click(function(){
    $('#ipad-portrait, #ipad-landscape').fadeToggle(300);
});