変換するcssの推移するjquery推移

StackOverflow https://stackoverflow.com/questions/1851141

  •  13-09-2019
  •  | 
  •  

質問

私はwebサイトを構築するとの推移です。見 http://vitaminjdesign.com/index.html とのサービスセクションの底ます。を使用してい:hoverバックグラウンドを変更するにはカラーです。使いたいのにjqueryを占同じ結果と優雅なフェード動作をします。ここでは私のhtml:

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(繰り返しの6倍の異なる画像、テキスト)

基本的には、です。iconrowはローしたいの背景から変更なしにbackground-color:#cccccc;ではロールオフにします。

役に立ちましたか？

解決

注：私は、あなたが提供されたリンク上で動作するようにFirebugを経由して私の解決策を構築し、テストしました。あなたが順序で次の手順を実行している場合、あなたはそれが完全に動作する必要がありますの

あなたはSafariとFirefoxの3.5とRGBA背景色をサポートする他のブラウザ以外で色にtransparentからアニメーション化することができません。あなたは、クロスブラウザのサポートを探しているならば、私はこのような問題を攻撃します。

1の。のデフォルトのホバー効果は非jsのクラスによってスコープ持っているので、:hover効果がフォールバックとして動作します。次のようにこれを行うための素晴らしい方法があります：

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

このページにも表示される前にno-jsするjsを変更します。

の 2 の

（ダミー要素を追加するa手順3である）の側に沿ってダミー素子あなたjsタグを追加するのjQueryを使用し

ここで使用するためのCSSは次のとおりです。

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */
mouseenterとmouseleave上に新しいダミー素子とアウト

の 3。のフェード

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});
あなたの代わりにソリッドカラーの画像の背景を使用することを決定した場合は、

最後に、注意してください。 IE7とIE8は24ビットPNGファイルの不透明度を変更することはできません。透明度アップそれは完全にネジます。

他のヒント

る必要がありましjqueryアニメカラープラグイン： http://plugins.jquery.com/project/color

その一部のようにします

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

編集：

当dcneinerコメントしたい場合は、最終的な色にない追加のコールバック関数のアニメーションの色を変更無し"の後で使用してアニメーション化.私の推測を使用してアニメーション化無しについては、定義されていません。変更ができます#fffのカラーが近くにある背景を円滑に行う理由により最終的な転移といいます。

のアニメーション署名:

animate(params, [duration], [easing], [callback])
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top