淡入淡出鼠標的過度/熄滅

Question

例如，我有「div1」和「div2」。而'div2'隱藏在'div2'後面，我想淡入div1中的div2並淡化...
我該怎麼做？
我看着trought那麼多帖子，和他們沒有給我任何結果......

<div id="news1"> 
    <table width="100%" height="145" border="0" cellpadding="0" cellspacing="0" class="newsBox"> 
     <tr> 
      <td align="center"> 
       <table width="230" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
         <td width="89" align="center" valign="top" class="shadow"><img src="images/news_03.jpg" width="89" height="89" /></td> 
         <td align="left" valign="top" class="espacoEsquerda">Duis felis magna, viverra ac dignissim at, mollis vitae felis. Praesent eleifend dictum quam tempor lobortis.</td> 
        </tr> 
        <tr> 
         <td height="41" align="left" valign="bottom"><img src="images/news_10.jpg" width="35" height="35" /></td> 
         <td align="right" valign="bottom" class="readmore">read more »</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 

<div id="news1Over"> 
    <table width="100%" height="145" border="0" cellpadding="0" cellspacing="0" class="newsBoxOver"> 
     <tr> 
      <td align="center"> 
       <table width="230" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
         <td width="89" align="center" valign="top" class="shadow"><img src="images/news_03.jpg" width="89" height="89" /></td> 
         <td align="left" valign="top" class="espacoEsquerda">Duis felis magna, viverra ac dignissim at, mollis vitae felis. Praesent eleifend dictum quam tempor lobortis.</td> 
        </tr> 
        <tr> 
         <td height="41" align="left" valign="bottom"><img src="images/news_11.jpg" width="35" height="35" /></td> 
         <td align="right" valign="bottom" class="readmoreOver">read more »</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 

Answer 1

我已經創建了一個的jsfiddle你一起玩。我用mouseevents觸發淡入淡出。不知道這是你想要的，但它證明了這個概念。

它做你所需要的嗎？

http://jsfiddle.net/2yERV/6/

$(function() { 
    $('#wrap').mouseenter(function() { 
     $('#news1Over').fadeOut('slow', function() { 
      // Animation complete. 
     }); 
     $('#news1').fadeIn('slow', function() { 
      // Animation complete. 
     }); 
    }) 
    .mouseleave(function() { 
     $('#news1Over').fadeIn('slow', function() { 
      // Animation complete. 
     }); 
     $('#news1').fadeOut('slow', function() { 
      // Animation complete. 
     }); 
    }); 
});    

Answer 2

通過適當的CSS定位，以及一些使用jQuery的.animation的，這可能是很容易的。我做了一個jsFiddle來展示使用你的HTML是多麼容易，但是我做了2個小小的改變。我將「div1」&「div2」包裝在一個「包裝div」中，給每個3「類名稱」並相應地定位它們：包裝定位relative所以沒有內部元素「浮出」，div1是正常位置（默認在div標籤上是靜態的），並且div2位於絕對位置，因此它位於div 1之上。然後將div 2的不透明度設置爲0，並將其z-index設置爲0，同時將div1保留爲正常，並將z -1的索引。如果你想要某些項目可點擊，z-index實際上只是一個問題，否則，你可以一起忽略它（將通過沒有z索引的第二個jsFiddle）。最後，我使用jQuery的.hover()來確定鼠標位於包裝元素上的位置，並使用.stop與.animate組合以「淡入/淡出」兩個內部div。

查看完整的例子here

而且沒有z-indexinghere

的細微變化，以HTML

<div id="news1wrapper" class="fade-wrapper"> 
    <div id="news1" class="fade-content"> 
     ... 
    </div> 
    <div id="news1Over" class="fade-cover"> 
     ... 
    </div> 
</div> 

簡單的CSS

.fade-wrapper { 
    position: relative; 
} 
.fade-content { 
    background: #FFF; 
} 
.fade-cover { 
    background: #FFA; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

的點點「O jQuery的

$(".fade-wrapper").hover(function(e) { 
    $(this).children(".fade-content").stop().animate({ opacity: 0 }, 1500); 
    $(this).children(".fade-cover").stop().animate({ opacity: 1 }, 1500); 
}, 
function(e) { 
    $(this).children(".fade-cover").stop().animate({ opacity: 0 }, 1500); 
    $(this).children(".fade-content").stop().animate({ opacity: 1 }, 1500); 
});