更改懸停上的2個項目的不透明度

Question

我在我的頁面上有2個圖像。當我將鼠標懸停在img.a上時，它將不透明度更改爲0，並且完美地工作。不過，我希望img.c在img.a懸停時也將不透明度更改爲0。我的代碼工作的img.a但沒有對img.c

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}, 
function() { 
$("img.c").stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$("img.c").stop().animate({"opacity": "1"}, "slow"); 
}); 

}); 
</script> 

Answer 1

問題是你的語法。

jQuery的懸停（）函數只有兩個參數 - 兩個函數。第一個是鼠標懸停元素時調用的，另一個是在鼠標懸停時調用的。

就快，現在你需要做的是結合4個功能分爲兩個功能，它會工作：

<script type='text/javascript'> 
$(document).ready(function(){ 

    $("img.a").hover(

    function() { // this function is called on mouseover img.a 
     $(this).stop().animate({"opacity": "0"}, "slow"); 
     $("img.c").stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { // this function is called on mouseout img.a 
     $(this).stop().animate({"opacity": "1"}, "slow"); 
     $("img.c").stop().animate({"opacity": "1"}, "slow"); 
    } 

    }); 

}); 
</script> 

Answer 2

而不是使用$(this)的，你可以使用$("img.a, img.c")作爲懸停功能的選擇。

有關基本示例，請參見this fiddle。

Answer 3

給應褪色同一類中的所有圖像。 然後給所有應該褪色在一起的圖像相同data-group。

<img class="fade" data-group="a" /> 
<img class="fade" data-group="b" /> 
<img class="fade" data-group="a" /> 

<script type="text/javascript"> 
$(function(){ /* shorthand for $(document).ready(function(){ */ 

    $('img.fade').hover(function(){ 

     $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "0"},"slow"); 

    },function(){ 

     $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "1"},"slow"); 

    });  

}); 
</script> 

現在，當您將鼠標懸停在其中一個圖像上時，同一組中的所有圖像都將淡出。

這是我上的jsfiddle例如：http://jsfiddle.net/Rv9jU/

Answer 4

$(function() { 
    $("#image1").css("opacity", 0.3); 
    $("#image1").hover(function() { 
     $(this).animate({ opacity: 1.0 }, 500); 
    }, function() { 
     $(this).animate({ opacity: 0.3 }, 500); 
    }); 
}) 

使用腳本標記中此功能在HTML頁面中有一節：

See Example on my blog...