2

タブを作成したいのですが、誰かがそのタブにカーソルを合わせると、新しい ul アイテムの下にフェードインおよびフェードアウト効果が表示されます。これまで私は mouseenter を使用してきましたが、新しい表示項目はそこにとどまって他のオプションを選択する必要があります。

HTML

<ul class="sector-nav">
<li><a href="#" class="residential-main">Residential</a></li>
<li><a href="#"class="commercial-main">Commerical</a></li>
<li><a href="#">Private</a></li>
</ul>

<ul class="res-pro residential-pro">
<li><a href="#">rProject 1</a></li>
<li><a href="#">rProject 2</a></li>
<li><a href="#">rProject 3</a></li>
</ul>

<ul class="com-pro commercial-pro">
<li><a href="#">cProject 1</a></li>
<li><a href="#">cProject 2</a></li>
<li><a href="#">cProject 3</a></li>
</ul>

JS

$(document).ready(function() { $('.residential-main').mouseenter(function() { $('.residential-pro').show(); }); $('.residential-main').mouseleave(function () { $('.residential-pro').hide(); }); }); 

$(document).ready(function() { $('.commercial-main').mouseenter(function() { $('.commercial-pro').show(); }); $('.commercial-main').mouseleave(function () { $('.commercial-pro').hide(); }); });

jsFiddleを参照してください

4

3 に答える 3

1

より良い方法は、CSS を使用することです。これは、フェードインアニメーションの例を使用したフィドルです。

.fadeIn {
        border: 1px solid #48484A;
        font-size: 18px;
        opacity:0;
        -webkit-transition : all 2s ease-out;
        -moz-transition : all 2s ease-out;
        -o-transition : all 2s ease-out;
        transition : all 2s ease-out;
    }
    .thisText:hover .fadeIn {
        opacity: 1;
    }

ただし、JQuery を使用しているため、アニメーションを提供する彼のフェードイン関数も使用できます。

JQuery ドキュメントの例を次に示します。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
p {
position: relative;
width: 400px;
height: 90px;
}
div {
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (<a href="#">click!</a>)
<div><span>CENSORED!</span></div>
</p>
<script>
$( "a" ).click(function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
return false;
});
</script>
</body>
</html>

その他の例については、ドキュメントを参照してください ( JQuery doc )

于 2013-10-22T09:31:48.250 に答える