2

好的，我有这个 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 设置为不透明度一半，然后每当用户将鼠标悬停或鼠标悬停在这些元素上时，不透明度设置为完整，上面有动画，就像从半不透明度淡入到完全不透明度，但问题是每当我将鼠标从这些元素中撤出时，没有动画像从完全不透明度淡出然后回到其默认不透明度 50%。我知道这可以通过 jquery 来完成，所以我在这里找人给我一个关于如何做的线索。首选css3。

希望我能找到可以解决我的问题的东西，谢谢。

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

4

2 回答 2

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
  })
于 2012-11-20T07:27:16.080 回答
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/

于 2012-11-20T07:26:26.893 回答