Question

例如，我有“div1”和“div2”。并且'div2'隐藏在'div2'后面，我希望淡化de div1上的div2，淡化... 我怎么能这样做？我看了很多帖子，但没有一个给我任何结果......

<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”中的“div2”，给出3个“类名”中的每一个并相应地定位它们：包装器位于relative所以没有内部元素“浮出”，div1是正常位置（默认是静态的div标签），并且div2位于绝对位置，以便它位于div 1.然后我将div 2的不透明度设置为0，并将其z-index设置为0，同时将div1保持为正常状态，z-index为1.如果您希望某些项目可以点击，那么z-index实际上只是一个问题，否则，您可以将它们全部忽略（将超过第二个没有z-indexing的jsFiddle）。最后，我使用jQuery的.hover()来确定鼠标在包装元素上的位置，并使用.stop与.animate组合来“淡入/淡出”两个内部div。

请参阅完整示例here

没有z-indexing here

对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);
});

鼠标翻转/淡出时淡出淡出

2 个答案: