4

開発サイトhttp://www.new.ianroyal.coのメイン サイト ロゴのホバー効果に onmouseover を使用しています。

onmouseover はサイトのロゴ画像を瞬時に変更します。jQuery を使用せずにトランジション効果 (フェードイン、または一般的にトランジション速度を遅くする) を適用できるかどうか疑問に思っていました。

これが私のコードです：

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" ' ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png"'>
  <img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson" />
</a>

私は検索して検索しましたが、まだ十分に把握していないjQueryだけが解決策のようです。

ありがとうございました

4

5 に答える 5

3

純粋なCSS3を使用できます。

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
  }

ここからの例。他にもたくさんの可能性がありますが、それは良いスタートになるはずです。

ただし、CSS3トランジションをサポートするブラウザでのみ機能します。Internet Explorerは特にゲームに遅れをとっており、Internet Explorer （およびCSS3をサポートしていない他のブラウザーの古いバージョン）を使用している人はまだたくさんいます。

古いバージョンのサポートを最大化する真のクロスブラウザーソリューションが必要な場合は、JQueryが最適です。どんなに難しいように見えても、フェードを行うことを学ぶために費やされた時間は本当に報われるでしょう。そして、JQueryが無料で提供するのと同じクロスブラウザー互換性を提供する同等の純粋なJavaScriptソリューションを実行するよりも、JQueryを少し実行する方法を学ぶ方がほぼ確実に簡単です。

于 2012-10-23T21:35:02.437 に答える
3

css3トランジションを使用します。

div {
    height: 100px;
    width: 100px;
    background: url(image1.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

div:hover {
    background-image: url(image2.png)
}

古いブラウザは単に遷移をアニメーション化しません。

デモ： http： //jsfiddle.net/elclanrs/jg7G3/ </ p>

于 2012-10-23T21:35:41.460 に答える
1

理想的には、CSSトランジションと:hoverセレクターを使用し、JSを完全に除外します。commeça。

于 2012-10-23T21:35:00.460 に答える
0

実際の例では、同じディレクトリに image1.jpg と image2.jpg を指定するだけです:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(function() {

$('img').mouseenter(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    $(this).fadeIn();
  });
});

$('img').mouseleave(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
    $(this).fadeIn();
  });
});


});

</script>

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">
于 2012-10-23T21:53:36.090 に答える
0

jQueryを学びます。長期的（および短期的）にあなたを幸せにすることを約束します. そうは言っても、jQuery を理解したら、バニラ js に戻って、それがどのように機能するかを本当に理解してください。

たとえば、jquery の問題は次のように単純です。

$(function() {
    $('a').fadeOut();
    $('a').attr('src', '{new image path}');
    $('a').fadeIn();
});
于 2012-10-23T21:31:43.910 に答える