Javascript css3或jquery不透明动画效果

好的，我有这个html代码

<a class="fade fade1" href="#"></a>
<a class="fade fade2" href="#"></a>
<a class="fade fade3" href="#"></a>

因此，根据上面声明的css3，默认情况下，a.fade设置为不透明度的一半，然后每当用户将鼠标悬停或滑过这些元素时，不透明度设置为完全，并带有动画，如从半不透明度淡入到完全不透明度，但问题是每当我从这些元素中取出鼠标时，没有像从完全不透明度淡出然后返回其默认不透明度50%这样的动画。我知道这可以由jquery来完成，所以我在这里找人给我一个如何完成的线索。css3优先

希望我能找到解决我问题的方法，谢谢

---

我对任何想法、建议和建议都持开放态度。

jQuery提供了

fadeIn（）

、

fadeOut（）

和

fadeIn（）

供您更改任何对象的不透明度。 只需为

$（“a.fade”）.hover（）触发
fadeIn（）
，
fadeOut（）
或
fadeIn（）

比如说,

$("a.fade").hover(
    function() { $(this).fadeTo("slow", 0.5); },
    function() { $(this).fadeTo("slow", 1); }
);

作为参考，
是的，您可以在jQuery中执行此操作：

$('#container')
  .on('mouseover', 'a.fade', function(){
   $(this).animate({'opacity': 1}, 500) // animate to 100%, in 500 ms
  })
  .on('mouseout', 'a.fade', function(){
   $(this).animate({'opacity': 0.5}, 500) // animate to 50%, in 500 ms
  })

尝试将转换设置为
a.fade
而不是
a.fade:hover
$('#container')
  .on('mouseover', 'a.fade', function(){
   $(this).animate({'opacity': 1}, 500) // animate to 100%, in 500 ms
  })
  .on('mouseout', 'a.fade', function(){
   $(this).animate({'opacity': 0.5}, 500) // animate to 50%, in 500 ms
  })