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/

您也可以通过为所有车轮使用一个中心圆来浓缩这一点。悬停时，使用适当的百分比、颜色等更新圆圈的文本。

于 2013-04-24T19:26:01.607 回答
0

通过使用类选择器使用类而不是 ID，您的悬停将应用于所有适用的类。作为旁注，我不会使用悬停，因为我相信它在 jquery 1.9.1 或 2 中已被弃用，而是您可以只使用 mousein 和 mouseout。

就像是：

$(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 回答