2

私はjQueryが初めてで、非常に明白で基本的な何かが欠けているように感じますが、頭を包み込むことはできません。

いずれにせよ、オブジェクトがホバーされたときにストローク幅をより広い量にアニメーション化するコードが少しあり、それが機能しました。

$(function() {
    $("#wheel1").hover(grow1, shrink1);
});

function grow1(evt) {
    $("#wheel1").animate({'stroke-width':'100'},300);
    $("#circle1container").css({'display':'block'});
    $("#circle1container").animate({'opacity':'1'},300);
}

function shrink1(evt) {
    $("#wheel1").animate({'stroke-width':'55'},300);
    $("#circle1container").animate({'opacity':'0'},300);
}

しかし、他にもこれを行いたいオブジェクトが 10 個あったので、これをさらに 9 回コピーして貼り付け、数値を 9 回変更するのではなく、統合しようとしましたが、うまくいきませんでした。

$(function() {
$("#wheel1").hover(grow("1"), shrink("1"));
$("#wheel2").hover(grow("2"), shrink("2"));
$("#wheel3").hover(grow("3"), shrink("3"));
$("#wheel4").hover(grow("4"), shrink("4"));
$("#wheel5").hover(grow("5"), shrink("5"));
$("#wheel6").hover(grow("6"), shrink("6"));
$("#wheel7").hover(grow("7"), shrink("7"));
$("#wheel8").hover(grow("8"), shrink("8"));
$("#wheel9").hover(grow("9"), shrink("9"));
$("#wheel10").hover(grow("10"), shrink("10"));

function grow(number) {
var name = "#wheel" + number;
$("#wheel" + number).animate({'stroke-width':'100'},300);
$("#circle" + number + "container").css({'display':'block'});
$("#circle" + number + "container").animate({'opacity':'1'},300);
}

function shrink(number) {
$("#wheel" + number).animate({'stroke-width':'55'},300);
$("#circle" + number + "container").animate({'opacity':'0'},300);
}

});

おそらくまだ最も効率的な方法ではありませんが、少し時間がかからず、簡単に変更できると思いました。ここでの取引が何であるかはわかりません。どんな助けでも大歓迎です、ありがとう！

http://jsfiddle.net/F4Yjj/5/これは、ホバーでアニメーション化しようとしているオブジェクトを示しており、ホバーは緑色の形状で機能しています (このメッセージの最初のコード)。

4

2 に答える 2

2

一意である必要がある ID を使用してホイールを選択する代わりに、各ホイールに「ホイール」のクラスを指定して、一度にすべてを選択できるようにします。

<path id="wheel10" class="wheel" .... />
<path id="wheel9" class="wheel" ... />
etc.

次に、jQuery を使用してすべての「ホイール」を選択し$(this)、関数でホバーされているものを参照できます。

$(function() {
    $("path.wheel").hover(grow1, shrink1);
});

function grow1() {
    $(this).animate({'stroke-width':'100'},300);
}

function shrink1() {
    $(this).animate({'stroke-width':'55'},300);
}

フィドル: http://jsfiddle.net/F4Yjj/1/

編集: この方法を使用すると、関数に「evt」は必要ありません。 http://jsfiddle.net/F4Yjj/3/

編集:別の要素も表示するには。ホイールごとに異なる物理要素がある場合 (更新された HTML に示されているように)、ホバーされたホイールの ID を特定し、その ID によって他の要素を選択できます。

function grow1() {
    var id=$(this).prop('id').split('_');
    $(this).animate({'stroke-width':'100'},300);
    $("#circlecontainer_"+id[1]).fadeIn(300);
}

function shrink1() {
    var id=$(this).prop('id').split('_');
    $(this).animate({'stroke-width':'55'},300);
    $("#circlecontainer_"+id[1]).fadeOut(100);
}

このフィドルには、wheel1 と wheel2 の円があります: http://jsfiddle.net/F4Yjj/7/

すべての車輪に 1 つの中心円を使用することで、これを要約することもできます。ホバーすると、円のテキストが適切なパーセンテージ、色などで更新されます。

于 2013-04-24T19:26:01.607 に答える
0

クラス セレクターを使用して ID の代わりにクラスを使用すると、該当するすべてのクラスにホバーが適用されます。補足として、ホバーはjquery 1.9.1または2で廃止されたと思われるため、使用しません。代わりに、マウスインとマウスアウトを使用できます。

何かのようなもの：

$(document).ready(function(){
  $('body').on('mousein','.wheel',function(){
    $(this).animate({'stroke-width':'100'},300);
  });

  $('body').on('mouseout','.wheel',function(){
    $(this).animate({'stroke-width':'55'},300);
  });
});

次に、idを持つすべてのホイールに.wheelの追加クラスがあることを確認してください

于 2013-04-24T19:32:15.473 に答える