鼠标悬停/移出时淡入淡出

Question

例如，我有“div1”和“div2”。并且“div2”隐藏在“div2”后面，我想在 div2 中淡入淡出 de div1...
我该怎么做？
我看了这么多帖子，都没有给我任何结果...

<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-index 为 1。z-index 只有在您希望某些项目可点击时才是真正的问题，否则，您可以一起忽略它（将通过第二个 jsFiddle 而不使用 z-indexing）。最后，我使用 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);
});