0

我有一堆做同样的悬停功能

$('#101').mouseover(function () {
        $('#p1_101').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_101').stop().animate({"fill-opacity": .7}, 200);
});
$('#102').mouseover(function () {
        $('#p1_102').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_102').stop().animate({"fill-opacity": .7}, 200);
});
$('#103').mouseover(function () {
        $('#p1_103').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_103').stop().animate({"fill-opacity": .7}, 200);
});

如何在一个函数中写这个？？

html

thwre 是一个带有 , , ... 的表。

和 svg 路径有 , , 并且每个都不同，这里不可能展示出来

4

4 回答 4

0

如果如您显示的代码中所示，要设置动画的元素的 id 总是"p1_"加上被悬停的元素的 id，那么您可以将相同的函数绑定到所有元素，然后只获取当前元素的 id通过this.id在函数中使用悬停元素：

$('#101,#102,#103').mouseover(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": .7}, 200);
});
于 2013-03-26T12:09:55.197 回答
0

像这样怎么样：

  function myFunction(var str){
    $('#'+str).mouseover(function () {
      $('#p1_'+str).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
      $('#p1_'+str).stop().animate({"fill-opacity": .7}, 200);
    });
  }

  myFunction('101');
  myFunction('102');
  myFunction('103');
于 2013-03-26T11:29:23.007 回答
0 
$.each([1, 2, 3], function (index, value) {
    $('#10' + value).hover(
    function () {
        $('#p1_10' + value).stop().animate({"fill-opacity": 1}, 200);
    },
    function () {
        $('#p1_10' + value).stop().animate({"fill-opacity": .7}, 200);
    });
});

更新

$.each(['01', '02', '03'], function (index, value) {
    $('#1' + value).hover(
    function () {
        $('#p1_1' + value).stop().animate({"fill-opacity": 1}, 200);
    },
    function () {
        $('#p1_1' + value).stop().animate({"fill-opacity": .7}, 200);
    });
});
于 2013-03-26T11:31:00.413 回答
0

我将对标记和 javascript 进行一些调整

HTML（基于给定案例的示例）

<div class="my-el" pel="#p1_101">101</div>
<p id="p1_101">p1</p>

<div class="my-el" pel="#p1_102">102</div>
<p id="p1_102">p2</p>

<div class="my-el" pel="#p1_103">103</div>
<p id="p1_103">p3</p>

<div class="my-el" pel="#p1_104">104</div>
<p id="p1_104">p4</p>

脚本

$(function(){
    $('.my-el').mouseover(function () {
        $($(this).attr('pel')).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $($(this).attr('pel')).stop().animate({"fill-opacity": .7}, 200);
    });
})

演示：小提琴

于 2013-03-26T11:34:38.403 回答