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 は を提供し、fadeIn()オブジェクトの不透明度を変更できます。、またはfor をトリガーするだけです。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 に答える
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 に答える