フェードインおよびフェードアウトしながら別の画像を表示するために画像の上にマウスを移動する

私はどのようにして他の画像をフェードインするために画像の上に正しくホバーするかを見つけようとしています、そしてあなたがマウスを動かすと、それは通常の画像にフェードバックするでしょう。

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

$(document).ready(function(){

$('img').hover(
    function(){
        $(this).stop().fadeOut(function(){
        var $temp = $(this).attr('src');
        $(this).attr('src', $(this).attr('data-alt-src'));
        $(this).attr('data-alt-src', $temp);
        });

        $(this).fadeIn();
    },
    function(){
        $(this).stop().fadeOut(function(){
        var $temp = $(this).attr('data-alt-src');
        $(this).attr('data-alt-src', $(this).attr('src'));
        $(this).attr('src', $temp);
        });

        $(this).fadeIn();

    }
);
});
#main-wrapper {
width: 970px;
margin: 0 auto;
text-align: center;
}

img {
width: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
    <title>Hover In/Out</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="main-wrapper">
        front side picture
        front side picture
        front side picture
        front side picture
    </div>
</body>
</html>
</div> </div>

これまでのところ、それは1つのマイナーな欠陥があるはずのように機能します。マウスを画像の上にすばやく移動して外に移動すると、2番目の画像のままになります。私は最初に他の画像を表示するために画像の上にマウスのカーソルを合わせたいと思っていました、そして次に画像から離れたときそれは最初の画像に戻ります。

2
nl ru de
1つの軽微な不具合があっても、それは本来の機能を果たします。
追加された 著者 Peter Lamberg,
それは十分きれいではない、あなたがしたいのですか?
追加された 著者 Batophobia,
追加の div コンテナで画像をラップし、それに background-image を設定できますか
追加された 著者 Batophobia,
コードレビューへようこそ。この質問がこのサイトの内容と一致しないのではないかと思います。コードレビューは、既存の実用的なコードを改善することです。コードレビューは、コードの機能を修正または変更するための支援を求めるサイトではありません。コードがあなたが望むことを実行したら、私たちはあなたがよりきれいな方法であなたが同じことをするのを手助けしたいと思います!詳細については、ヘルプセンターをご覧ください。
追加された 著者 user52915,
私はイメージなしにこれの機能を理解することはできません。 placehold.it または placekitten.com 、または lorempixel.com までもありますか。
追加された 著者 Ben Richardson,

4 答え

あなたはあなたのインデントを修正する必要があります。

ブロック内のコードはもう1つのレベルのインデントを取得します。

ここにあなたのインデントされたJavaScriptがどのように見えるかがあります:

$(document).ready(function() {

    $('img').hover(
    function() {
        $(this).stop().fadeOut(function() {
            var $temp = $(this).attr('src');
            $(this).attr('src', $(this).attr('data-alt-src'));
            $(this).attr('data-alt-src', $temp);
        });

        $(this).fadeIn();
    },

    function() {
        $(this).stop().fadeOut(function() {
            var $temp = $(this).attr('data-alt-src');
            $(this).attr('data-alt-src', $(this).attr('src'));
            $(this).attr('src', $temp);
        });

        $(this).fadeIn();

    });
});

あなたのCSSはまた貧弱なインデントを持っています。

これはあなたのインデントされたCSSです:

#main-wrapper {
    width: 970px;
    margin: 0 auto;
    text-align: center;
}

img {
    width: 200px;
}

$( 'img')。hover に渡す2つの関数では、ほぼ同じことをしています。データを交換するために2つのパラメータを取る別の関数を作成することをお勧めします。

これが私が思いついたものです:

/*
    Sets the .stop().fadeOut of an element to swap two properties of that element
    @param(jQuery Object) elem -- the element
    @param(string) oldSrc -- one element to swap
    @param(string) newSrc -- another element to swap
*/
function fadeSwapSrc(elem, oldSrc, newSrc) {
    elem.stop().fadeOut(function() {
        var $temp = elem.attr(oldSrc);
        elem.attr('src', elem.attr(newSrc));
        elem.attr(newSrc, $temp);
    }
}

今、あなたのコードは単純になります:

$(document).ready(function() {

    $('img').hover(
    function() {
        fadeSwapSrc('src', 'data-alt-src');
        $(this).fadeIn();
    },

    function() {
        fadeSwapSrc('data-alt-src', 'src');
        $(this).fadeIn();
    });
});
3
追加された

私はこれが純粋にCSSでできることを指摘しなければならないと思います。 javascriptの必要性を取り除くことに加えて、これはその「1つの小さな欠陥」を修正するという利点もあります。

これがここで何が起こっているのかについての説明です。

CSSでは、 transition (ブラウザプレフィックスの有無にかかわらず)に関する行は、デフォルトの画像からホバー画像への移行を処理し、フェード効果を与えます。

これらが最初にホバーされたときにスムーズに行われるようにするために、それらが事前にロードされて .imgpl </の要素にキャッシュされるように、それらを事前にロードするホバーイメージをドムに追加しましたそれらのコード>クラス。これらはCSSで隠されています - それらはホバー画像をロードするのに役立ちます。これを行うことはオプションですが、私はそれがより良いユーザーエクスペリエンスを与えると感じます。それがなければ、ブラウザは最初にホバーされたときに画像をロードしなければならず、それはディスプレイの遅延を招く。

デフォルトの画像は背景画像として定義されています。

.img1{background:url("http://www.placehold.it/350x150") no-repeat;}

そしてホバー画像は:hover 疑似クラスで定義されます。

.img1:hover{background:url("http://www.placehold.it/351x151")no-repeat;}

下のスニペットを実行して、正しく動作することを確認してください。

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.img{
    -webkit-transition: background 500ms ease-in-out;
    -moz-transition: background 500ms ease-in-out;
    -ms-transition: background 500ms ease-in-out;
    -o-transition: background 500ms ease-in-out;
    transition: background 500ms ease-in-out;
    width:350px;
    height:150px;
    overflow:hidden;/*just for the demo sake*/
}
/* these are just placeholders to preload the images */
.imgpl{
    display:none;
}

.img1{
    background:url("http://www.placehold.it/350x150") no-repeat;
}
.img1:hover, .img1.imgpl{
    background:url("http://www.placehold.it/351x151") no-repeat;
}
.img2{
    background:url("http://www.placehold.it/352x152") no-repeat;
}
.img2:hover, .img2.imgpl{
    background:url("http://www.placehold.it/353x153") no-repeat;
}
.img3{
    background:url("http://www.placehold.it/354x154") no-repeat;
}
.img3:hover, .img3.imgpl{
    background:url("http://www.placehold.it/355x155") no-repeat;
}
.img4{
    background:url("http://www.placehold.it/356x156") no-repeat;
}
.img4:hover, .img4.imgpl{
    background:url("http://www.placehold.it/357x157") no-repeat;
}
<div id="main-wrapper">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="img img3"></div>
    <div class="img img4"></div>
</div>

<!-- these are optional for pre-loading the hover images, they don't display -->
<div class="img1 imgpl"></div>
<div class="img2 imgpl"></div>
<div class="img3 imgpl"></div>
<div class="img4 imgpl"></div>
</div> </div>
2
追加された
@glampert - 良い点、私はいくつかの説明を追加しました。さらに追加する必要があると思われる場合は、お知らせください。
追加された 著者 CLIFF ALBRIGHT,
述べたように@ Hosch250、私はいくつかの説明を追加しました。さらに追加する必要があると思われる場合は、お知らせください。
追加された 著者 CLIFF ALBRIGHT,
説明が組み込まれていれば私はこれを支持するでしょう(そしてそう、私はそれが自分自身で何をするのか知っています、しかしそれはちょうどCRが働く方法です)。
追加された 著者 Smacky,
これは今いいです。
追加された 著者 Smacky,
読者がなぜこれがOPの解決策よりも優れているのか、そしてどのように優れているのかをより明確に理解することができるようにあなたの実装をさらに記述できればそれはより良いでしょう。
追加された 著者 raksha,

1つではなく2つのカスタム属性を使用できます。この場合、 src 値を交換するのではなく、単に置き換えるだけです。


UPD: With single data- attribute you should create singleton, which will handle synchronization. I had try to draft singleton, but it is not so easy for me. It should be responsible for removing duplicates from task queue and watching on data consistency.

0
追加された
@TonyTaiNguyenそれ以外の場合は、jsにさらに2つのコードを追加する必要があります。
追加された 著者 Batophobia,
私はあなたの説明を見ます、しかしhtmlにもっとコードを追加することは悪い習慣ですか?
追加された 著者 SSR,

"front"、 "back"のimage img 要素のペアの親要素コンテナを作成してみてください。画像コンテナ内の画像を position:abosolute に設定します。画像コンテナ内の最後の画像で .fadeToggle()を呼び出す

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(document).ready(function() {

  var fx = function fx() {
    return $("img:last", this).fadeToggle();
  };

  $(".img-wrapper").hover(fx, fx);

});
#main-wrapper {
  width: 970px;
  margin: 0 auto;
  text-align: center;
}
img {
  width: 200px;
}
.img-wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
}
.img-wrapper img {
  display: block;
  position: absolute;
}
.img-wrapper:hover {
  cursor: wait;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Hover In/Out</title>
  <meta charset="UTF-8">
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>

<body>
  <div id="main-wrapper">
    <div class="img-wrapper">
      front side picture
      back side picture
    </div>
    <div class="img-wrapper">
      front side picture
      back side picture
    </div>
  </div>
</body>

</html>
</div> </div>
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript