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を作成しました。私はマウスイベントを使用してフェードをトリガーしました。これがあなたが望むものであるかどうかはわかりませんが、それは概念を証明しています。

それはあなたが必要とすることをしますか？

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の使用により、これは非常に簡単になります。HTMLを使用するのがいかに簡単かを示すためにjsFiddleを作成しましたが、2つのわずかな変更を加えました。「div1」と「div2」を「ラッパーdiv」でラップし、3つの「クラス名」をそれぞれ指定して、それに応じて配置しました。ラッパーはrelative、内部要素が「浮き上がらない」ように配置され、div1は通常の位置です（デフォルトはdivタグでは静的）、div2はdiv 1の上に重なるように絶対位置に配置されます。次に、div 2の不透明度を0に設定し、そのz-indexも0に設定し、div1は通常どおりz-インデックス1。z-indexは、特定のアイテムをクリック可能にする場合にのみ問題になります。それ以外の場合は、すべて無視できます（z-indexなしで2番目のjsFiddleを通過します）。マウスがラッパー要素の上にある場所を特定し、.animateと組み合わせて.stopを実行して、2つの内部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%;
}

少し'ojQuery

$(".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 に答える