如何使一个div淡入，另一个淡出？

毋庸置疑，我是初学者，尤其是涉及JavaScript和jQuery时。 我正在寻找一种方法让一个div淡入（通过可见性，而不是不透明度）和一个淡出。

这是我想要的HTML的一个例子。

 
 When you hover over .main, .secondary fades in and .main fades out 
 
 This text is visible by default 
  

我环顾四周，找不到我想要的东西。

非常感谢你提前。

Answer 1

如果你需要一些效果：

 $('.secondary').fadeIn('fast'); $('.main').fadeOut('fast'); 

如果不：

 $('.secondary').fadeIn(0); $('.main').fadeOut(0); 

或者如果你想保留隐藏元素的位置：

 $('.secondary').css({ visibility: 'visible' }); $('.main').css({ visibility: 'hidden' }); 

Answer 2

您不能仅使用visibility使元素渐变，因为它只接受visible或hidden 。

您需要使用opacity 。

 var secondary = $('.secondary'); $('.main').hover(function() { secondary.stop().fadeIn(100); $(this).stop().fadeOut(100); }, function() { secondary.stop().fadeOut(100); $(this).stop().fadeIn(100); }); 

jsFiddle 。

然而，这带来了问题。 您正在使用mouseleave事件淡出元素，因此它将循环。 你想要mouseleave事件（我假设你做了）？ 如果没有，只需用mouseenter()替换hover() mouseenter()并删除第二个参数。

Answer 3

 $(document).ready(function() { $('.secondary').fadeIn('slow', function() { // Animation complete }); $('.main').fadeOut('slow', function() { // Animation complete }); }); 

Answer 4

试试这个：

  
 
 When you hover over .main, .secondary fades in and .main fades out 
 
 This text is visible by default 
  

Answer 5

你可以简单地使用

 $(".container div").click(function() { $(".main,.secondary").slideToggle(); }); 

这是现场演示：

http://jsbin.com/izolik/edit#javascript,html,live