0

例如，我有“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>
4

2 回答 2

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.
        });
    });
});
于 2012-11-19T20:34:33.707 回答
0

通过适当的 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 只有在您希望某些项目可点击时才是真正的问题，否则，您可以一起忽略它（将在没有 z-indexing 的情况下通过第二个 jsFiddle）。确定鼠标在包装元素上的位置，并.stop与.animate组合以“淡入/淡出”两个内部 div。

在此处查看完整示例

没有z-indexing 这里

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);
});
于 2012-11-19T21:01:39.160 回答