在DIV1悬停时使用唯一ID淡入和淡出DIV2

Question

我有一堆具有唯一ID的div，我希望它们在悬停时显示透明效果。

如何使用独特的ID并且不闪烁来正常工作？

以下是我尝试的内容：http://jsfiddle.net/mKDP4/

<img src="test.jpg" class="ad_cover" id="1">
<div class="ad_fade" id="fade1"></div>

jquery的

$('.ad_cover').mouseover(function() {
    var ad_id = this.id;
    $('#fade'+ad_id).fadeIn('slow');
});
$('.ad_cover').mouseout(function() {
    var ad_id = this.id;
    $('#fade'+ad_id).fadeOut('slow');
});

Answer 1

这可以通过简单的css来实现，具体取决于您的目标浏览器

http://jsfiddle.net/89pBb/

 <a href="#"><div id="test">bla bla bla</div></a>

 a #test{padding:20px; background-color:#F00; width:200px; height:200px;}
 a:hover #test{opacity:0.5; transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out;}

Answer 2

试试这个：

  $('.ad_cover').mouseenter(function() {
      var ad_id = this.id;
      $('#fade'+ad_id).stop().fadeIn();
  });
  $('.ad_cover').mouseleave(function() {
      var ad_id = this.id;
      $('#fade'+ad_id).stop().fadeOut();
  });

http://jsfiddle.net/maysamsh/mKDP4/3/