0

jCycleを使用して単純なスライダーを作成しています。スライダーにカーソルを合わせると、「前へ」と「次へ」の矢印が表示されます。カーソルがスライダーを離れたら、矢印を再び消したいのですが。矢印はスライダーの上に絶対的に配置されます。

スライダーのHTML：

        <div id="next"></div>
        <div id="prev"></div>

        <ul id="s2">            
            <li><img src="bla1" /></li> 
            <li><img src="bla2" /></li>
            <li><img src="bla3" /></li> 
            <li><img src="bla3" /></li>             
        </ul>

私は現在このコードを使用しています：

jQuery('#s2,#next,#prev').hover( function () {
    jQuery('#next,#prev').animate({opacity: 0.9});
},
function () {
    jQuery('#next,#prev').animate({opacity: 0});
});

これは機能しますが、アニメーションを2回トリガーします。スライダーにカーソルを合わせたときと矢印要素（#nextまたは#prev）にカーソルを合わせたときです。

アニメーションを1回だけトリガーするにはどうすればよいですか？

例については、http：//fc.boilerroom.tv/を参照してください。

4

2 に答える 2

1

最初のセレクターからを削除し、#next, #prev代わりに次の prev の親オブジェクトを使用できます。

jQuery('#container-main .ticker').hover( function () {
    jQuery('#next,#prev').stop(true).animate({opacity: 0.9});
},
function () {
    jQuery('#next,#prev').stop(true).animate({opacity: 0});
});

注：.stop(true)ホバーにすばやく出入りすると正常に動作するように追加しました。

于 2012-06-28T15:27:09.123 に答える
0

最初の選択から を削除#next, #prevします ... だけにしておきますjQuery('#s2')

于 2012-06-28T15:28:11.477 に答える