0

Web 開発者は私の JavaScript が有効であると表示していますが、ページを実行すると機能しません。jquery-colorのサイトの使い方を追ってみましたが、毎回プロパティIDが抜けていました。大学で JavaScript を学んだとき、もっと良い講師がいればよかったと心から思います。彼は、実際には教えずに、jQuery とほとんどの JavaScript を全体としてフラッシュしました。

編集＃1：コードの（この）エラーを修正しましたが、それでもうまくいきません。

jQuery のコードは次のとおりです。

<script type="text/javascript">
        jQuery("li.site-links").hover(function(){
            jQuery(this).stop().animate({
                backgroundColor: "#000000"
            }, 1000 );
        });
    </script>

およびサイト リンク: http://lab.nmjgraphics.com

4

4 に答える 4

4

イベントのソースにアクセスするには、セレクターでに変更"this"する必要があります。thisセレクターで「this」を使用すると、タグ名 this が検索されjQuery("input")、 name を持つすべてのタグが取得されますinput。

変化する

 jQuery("this")

に

 jQuery(this)

との違いは"this"こちらでthis確認できます

于 2013-01-30T07:42:47.397 に答える
0

まず、セレクターが間違っています。<a>.site-linkはありません。あなたは<li><a>.site-linkを持っています

したがって：

$(".site-links").hover(function(){
jQuery(this).parent().stop().animate({
    backgroundColor: "#000"
    }, 1000 );
});

ここに不透明度のデモがあります: http://jsfiddle.net/2VgBa/

于 2013-01-30T07:58:32.333 に答える
0

これを試して：

jQuery(function(){
   jQuery("a.site-links").hover(function(){
        jQuery(this).closest('li').stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });

どちらかで試すことができます.parent('li')

またはこれを試してください：

jQuery(function(){
   jQuery("a.site-links").parent('li').hover(function(){
        jQuery(this).stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });
于 2013-01-30T07:43:52.870 に答える
0

修正する$("this")こととは別に、$(this)

jQuery("li.site-links")liclass で を探しますが、実際のsite-linksサイトには何もないため、このセレクターは何も選択しません。

これを修正するには、これらのいずれかが機能します

  • セレクターを に変更して、 any内の any"li .site-links"をターゲットにするか、または.site-linksli
  • ( ) にsite-linksクラスを追加するか、li<li class="site-links">
  • class で"a.site-linksany をターゲットにするには、セレクターを に変更します。asite-links

また、ホバーするたびに背景色を黒にアニメーション化しようとしますが、アニメーションを元に戻すことはありません。それはあなたが望むものですか？おそらくあなたは次のようなものが欲しい

jQuery("li.site-links").hover(function(){
    jQuery(this).stop().animate({
        backgroundColor: "rgb(79, 89, 100)"
    }, 1000 );
},function(){
    jQuery(this).stop().animate({
        // color alpha not supported in IE8: http://caniuse.com/#search=rgba
        backgroundColor: "rgba(79, 89, 100, 0)"
    }, 1000 );
});

10 未満の IE でのエクスペリエンスの低下 (アニメーションなし、背景が突然変化する) が問題にならない場合は、CSS トランジションを使用する必要があります。CSS トランジションは (色だけでなく) あらゆる種類の背景をトランジションできるため、JavaScript は必要ありません。

#menu-bar li{
  transition: 1s;
  -webkit-transition: 1s;
  background: url("../imgs/menu-normal.png");
}

#menu-bar li:hover{
  background: url("../imgs/menu-hover.png");
}
于 2013-01-30T08:00:42.160 に答える