0

このjqueryに少しこだわっています。

ナビゲーションバーの上にリストであるバナーがあります。理想的には、ナビゲーションバーのliにカーソルを合わせると、「キャプション」をバナーdivの上にスライドさせたいと思います。

私は次のようなものを推測します：

<div id="banner">
<div class="home_caption">This is Home!</div>
<div class="about_caption">This is About!</div>
</div>

<div id="navbar">
  <ul>
    <li id="home"><a href="#">Home</a></li> 
    <li id="about"><a href="#">About</a></li>
  </ul>
</div>

したがって、「home」にカーソルを合わせると、「home_caption」DIVがスライドして「banner」divの上に表示されます。

jquery：

$(document).ready(function(){
        $('#home').hover(function(){
            $(".home_caption", this).stop().animate({top:'160px'},{queue:false,duration:160});
        }, function() {
            $(".home_caption", this).stop().animate({top:'260px'},{queue:false,duration:160});
        });

});

https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htmを見ましたが、それが私のニーズに適応できるかどうかはわかりません。つまり、「ホバー」領域が「キャプション」の外側にあります。範囲。

ありがとう

4

3 に答える 3

0

あなたがあなたのコードを使いたいなら、あなたは置く必要があります

display: none;

キャプションクラスで。

要素を表示または非表示にできる優れたjQuery効果があります。それはトグルと呼ばれます。最終的なコードは次のようになります。

$(document).ready(function(){

    $('#home').hover(function(){
        $(".home_caption").toggle(100);     
    });

});
于 2009-11-25T15:11:30.587 に答える
0

$(".home_caption", this)に変更するだけで$(".home_caption")これが修正されると思います。私はあなたの特定の例でそれをテストしていないので、他の問題があるかもしれませんが、現状では、＃home内で.home_captionを検索しています（これによって参照されます）。

于 2009-11-25T15:11:48.850 に答える
0

このチュートリアルはあなたを助けるはずです。

5aを参照してください： http ：//www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.webdesignerwall.com/demo/jquery/animated-hover1.html

于 2009-11-25T15:42:37.387 に答える