1

下のバーにカーソルを合わせると、そのすぐ上にある別の div にスライドし、そこにある項目をクリックしてから、両方の「表示された div」をマウスで離すとスライドします。

ただし、マウスを下部のバーから移動して、新しく表示された div (div でスライド) の何かをクリックすると、効果が再度有効になりました。これを停止して、両方にカーソルを合わせることができます (div でスライドした後)有効) そして、基本的に同じスライドダウン/スライドアップ効果のループに配置して、効果を再起動する方法を持っています。

これが私のコードです：

$(".playlist").hide();
$(".player, .playlist").hover( 
    function(){ $(".playlist").slideDown(); },
    function(){ $(".playlist").slideUp(); }
);

そして私のHTML：

<div class="playlist">
<!-- This would display some content that I can click on -->
</div>

<div class="player">
<!-- This expands across the whole window and is fixed to the bottom -->
</div>
4

1 に答える 1

2

http://jsfiddle.net/jv25Y/

新しいマークアップ

<div class="player">
    <div class="playlist">
         This would display some content that I can click on 
    </div>
    This expands across the whole window and is fixed to the bottom
</div>

新しい JS

$(function(){
    $(".playlist").hide();
    $(".player").hover( 
        function(){ $(".playlist").slideDown(); },
        function(){ $(".playlist").slideUp(); }
    );
});

そのようなものは機能しますか？基本的にプレイリストは現在プレーヤーに含まれています。そのため、プレイリストのリンクをクリックしようとしているときに、マウスがプレーヤーから離れることはありません。それがうまく収まらない場合 (ページのスタイルなどにより) 要素をプレイリストとプレーヤーの周りにラップし、代わりに次のように hover を呼び出すこともできます。

マークアップ

<div id="wrapper">
    <div class="playlist">
         This would display some content that I can click on 
    </div>
    <div class="player">
        This expands across the whole window and is fixed to the bottom
    </div>
</div>

JS

$("#wrapper").hover( 
     function(){ $(".playlist").slideDown(); },
     function(){ $(".playlist").slideUp(); }
 );
于 2011-02-10T05:50:52.280 に答える