web-dev-qa-db-ja.com

リンクホバーへのフェード効果

http://www.clearleft.com のような多くのサイトでは、リンクがホバーされるとすぐに切り替わるのではなくデフォルトの色に変わってフェードインすることに気付くでしょう。アクション。

私はJavaScriptを使ってこの効果を生み出していると思いますが、誰もがその方法を知っていますか？

csshoverfadeeffect
127
Miles Henrichs

最近では CSS3トランジション を使うほうがずっと簡単なので CSSをめちゃめちゃにしている 、ブラウザのサポートはそれなりに美しく、単に表面的なもので、うまくいかないかどうかは関係ありません。うまくいきません。

このようなことで仕事は終わります。

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

次のように、各宣言をカンマで区切ることで、特定のCSSプロパティをさまざまなタイミングやイージング関数で移行させることもできます。

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

デモはこちら

315
Marcel

私はあなたが「私はJavaScriptがこの効果を生み出すために使われると思う」とあなたが述べる質問で知っています、しかしCSSも使うことができます、例は以下です。

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

そして、これが JSFIDDLE です。

ある回答の中でMarcel氏は、「複数のCSSプロパティを遷移させる」ことができることを指摘しています。また、「all」を使用して、以下のようなすべてのyour：hoverスタイルを要素に適用できます。

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

そして、 "all"の例では、 JSFIDDLE です。

8
Jake

JQueryUIを使ってこれを行うことができます。

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

6
Niclas Sahlin

あなたのCSSでこれを試してみてください。

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
2
Dylan