緊湊懸停功能

我有一大堆的懸停功能，這做同樣的緊湊懸停功能

$('#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路徑有哪些，每一個不同的是，它是不可能在這裏顯示它

來源

2013-03-26 gidzior

也顯示HTML。 – 2013-03-26 11:23:43

所有的選擇器都是'id'，爲什麼不使用'class'？ – egig 2013-03-26 11:23:49

你的id值無效，[id應該以字母開頭]（http://www.w3.org/TR/html401/types.html#type-name） – 2013-03-26 11:24:18

$.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); 
    }); 
});

UPDATE

$.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-26 11:31:00

是的，這是完美的，thx隊友 – gidzior 2013-03-26 11:37:02

很高興幫助！ – 2013-03-26 11:38:31

但如果我有超過10個ID呢？我爲每個函數01,02,03添加0，並且從懸停ID中刪除0，但它是可以工作的，嘿嘿？ – gidzior 2013-03-26 11:47:44

怎麼樣像這樣：

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-26 11:29:23 egig

我會做一些調整，以標記和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); 
    }); 
})

演示：Fiddle

來源

2013-03-26 11:34:38

如果您在顯示的代碼中，要動畫的元素始終有一個ID爲"p1_"加上被徘徊的元素的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-26 12:09:55 nnnnnn

緊湊懸停功能

回答

相關問題