Question

好的我有html的这段代码。

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

和上面那些html元素的css

a.fade
{
width: 249px;
height: 90px;
float: none;
clear: both;
margin: 8px auto;
overflow: auto;
display: block;

/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}
a.fade1
{
background: transparent url(http://jameskbrooks.com/wp-    content/uploads/2012/11/MC2151023682-e1353394381773.gif) no-repeat top left;
}
a.fade2
{
background: transparent url(http://jameskbrooks.com/wp-    content/uploads/2012/11/MC2151023684-e1353394564665.gif) no-repeat top left;
}
a.fade3
{
background: transparent url(http://jameskbrooks.com/wp-            content/uploads/2012/11/MC2151023683-e1353394572666.gif) no-repeat top left;
}
a.fade:hover
{

/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=100);

    /* Older than Firefox 0.9 */
    -moz-opacity:1.0;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 1.0;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 1.0;

  -webkit-transition: opacity 600ms linear;
  -moz-transition: opacity 600ms linear;
  -o-transition: opacity 600ms linear;
  transition: opacity 600ms linear;

}

因此，基于上面声明的那些css3，默认情况下，a.fade设置为opacity的一半，然后每当用户将鼠标悬停或鼠标悬停到这些元素时，不透明度设置为full，其上有一个动画，如淡入半透明度为完全不透明但问题是每当我从那些元素中撤出鼠标时，没有动画像从完全不透明度淡出然后回到其默认不透明度50％。我知道这可以通过jquery完成，所以我在这里找一个人给我一个如何做的线索。 css3首选。

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

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

Answer 1

jQuery为您提供fadeIn()，fadeOut()和fadeIn()来更改任何对象的不透明度。只需为fadeIn()触发fadeOut()，fadeIn()或$("a.fade").hover()。

例如，

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

供您参考，http://api.jquery.com/fadeTo/

Answer 2

是的，你可以在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
  })

css3或jquery不透明度动画效果

2 个答案: