0

これを行うためにjQueryが使用するライブラリになると思います。マウスオーバーで画像のソースを切り替えてから、マウスアウトで元に戻す方法は確かにわかります。しかし、どうすれば画像へのフェードと画像からのフェードでこの効果を達成できますか？

私はすでにjQueryCycleプラグインを使用してこれを達成しようとしましたが、失敗しました。これを行うもっと簡単な方法があるのではないかと思います。助けていただければ幸いです、何か考えはありますか？

4

3 に答える 3

2

DIV に画像を配置し、DIV の背景を最初の画像に設定します。DIV にイメージ タグを配置し、SRC を 2 番目のイメージにポイントします。

これで、IMG の不透明度をいじることができ、何も交換することなく背景画像を露出させることができます。

.opacity() を使用

ラッパー DIV に寸法を設定してください。そうしないと、内部の画像の不透明度がゼロになると消えてしまいます。

<div class="wrapper">
   <img src="..." />
</div>
于 2011-08-03T19:58:02.957 に答える
1

CSS3 は、このようなことを処理するために一連のトランジション プロパティを追加していますが、現時点では、jQuery を使用することに設定されている場合は、関数をand と.animate組み合わせて使用​​できます。mouseentermouseleave

例：

$('img')
    .mouseenter(function() {
        $(this).stop(true,true).animate({ opacity: 0.5 }, 2000);
    });
    .mouseleave(function() {
        $(this).stop(true,true).animate({ opacity: 1 }, 2000);
    });

は.stop、前のアニメーションをクリアして終了させるので、ユーザーが要素の上に何度もすばやくホバーした場合でも、アニメーションが長いキューに蓄積されることはありません。

于 2011-08-03T19:59:59.563 に答える
0

これを試すことができます

$(function(){
  $("imageSelector).mouseover(function(){
      $(this).data("oldSrc", this.src).attr("src", "newSource").stop().fadeT0(500, 1);
  }).mouseout(function(){
     $(this).attr("src", $(this).data("oldSrc")).stop().fadeTo(500, 0.5);
  });
});
于 2011-08-03T20:03:15.723 に答える