0

OKだから、ホバー時に別の画像にクロスフェードする画像があります。また、2 番目の画像に対応する別のテキストにクロスフェードする説明テキストもあります。私が今持っているもの、ちょっと悪い、私が持っている唯一の問題は、それが空白にフェードすることです(CSS: Display-none - 2番目の画像が最初の画像の横にポップアップしないように追加されました...私はポジションをいじってみましたが、今のところサイコロはありません)

また、その周りに関数をトリガーするスポットがあるようです（ポインターを動かします）...まるである種のラッピングが起こっているようですか？

全体として、(fadeIn/fadeOut とは対照的に) 表示と非表示の機能を試してみましたが、問題はありませんでした...しかし、望ましい効果は得られませんでした。

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").hide();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").hide();
});
.bottom {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="top" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
<img class="bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
<p class="top">Top Text</p>
<p class="bottom">Bottom Text</p>

4

1 に答える 1

0

あなたはほとんどそれを持っています。移行を奇妙にする最初のことは、hide()代わりに を呼び出すことですfadeOut()。あなたが言及したように、画像が一時的に重なり合うのを避けるために、おそらくこれを行ったでしょう。fadeOut()この場合、絶対配置で使用するのが良い方法です。マークアップを機能させるために少し再構築したことに注意してください。

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").fadeOut();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").fadeOut();
});
.top, .bottom {
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
  <p>Top Text</p>
</div>
<div class="bottom">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
  <p>Bottom Text</p>
</div>

于 2015-07-25T02:09:52.623 に答える