jQuery隐藏一个div显示另一个

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

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

我如何使用jQuery做到这一点？ 谢谢。

Answer 1

您可以使用.toggle()在函数之间.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); });