0

自動回転するナビゲーションを備えたjqueryバナーサイクルがあります。ナビゲーションはリストに設定され、アクティブなスライドにはアクティブスライドのLIクラスがあります。

<ul id="billboard-nav">
    <li class="activeSlide"><span class="overlay">NAV1</span></li>
    <li><span class="overlay">NAV2</span></li>
    <li><span class="overlay">NAV3</span></li>
</ul>

Jqueryは、.overlayが不透明度0になるように設定し、ホバーすると不透明度1に変わります。

<script>
$(function() {  

    $("#billboard-nav li .overlay").css({ opacity: 0 });

    $("#billboard-nav li").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );

});
</script>

これはうまく機能しますが、不透明度を維持するために.activeSlide .overlayが必要です。1。スタイルシートでopacity：1！importantを設定できますが、これはCSS3であり、ie7,8ではサポートされていません。JSソリューションが非常に好まれます。

どんな助けでもいただければ幸いです。ありがとうございました。

4

3 に答える 3

1

liにクラスactiveSlideが含まれているかどうかを最初に確認し、これを各関数の行の前に配置します

if(!$(this).attr("class") || $(this).attr("class")!="activeSlide"

別の選択肢は次のとおりです。

$("#billboard-nav li").no(".activeSlide").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );
于 2012-09-12T15:48:29.613 に答える
0

条件を追加して、現在のliにactiveSlideクラスがあるかどうかを確認します。ある場合は何もしません。

$(function() {

    $("#billboard-nav li .overlay").css({
        opacity: 0
    });

    $("#billboard-nav li").hover(

    function() {
        $(this).children('.overlay').stop().animate({
            "opacity": "1"
        }, 100);
    }, function() {
        if ($(this).hasClass('activeSlide')) {
           // Because this has ActiveSlide class do nothing
        }
        else {

            $(this).children('.overlay').stop().animate({
                "opacity": "0"
            }, 1200);
        }
        });

    });​

ここでFIDDLEを確認してください

于 2012-09-12T15:53:11.067 に答える
0

これを試して：

$('#billboard-nav li').hover(function() {
  if ($('this').hasClass('activeSlide')) {

  }
  else {
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );
  }
});
于 2012-09-12T15:55:02.017 に答える