jQueryアニメーションを使用して200msのクロスフェードでimgスイッチソースを作成しますか？

Question

ここに私の関連コードがあります。私はクリックした場所に応じて画像を切り替えています。徐々に画像を切り替える方法はありますか？おそらくそれらを切り替える間にアニメーション？一種のフェードインがフェードアウトします。

<script type="text/javascript"> 
    jQuery(document).ready(function ($) { //fire on DOM ready 
     $('#mainproductpicture').addpowerzoom({ 
      defaultpower: 2, 
      powerrange: [2, 5], 
      largeimage: null, 
      magnifiersize: [200, 200] //<--no comma following last option! 
     }) 

     $('#smallpictureone').click(function() { 
      $("#mainproductpicture").attr("src", $(this).attr("src")); 

      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }); 

     $('#smallpicturetwo').click(function() { 
      $("#mainproductpicture").attr("src", $(this).attr("src")); 

      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }); 

     $('#smallpicturethree').click(function() { 
      $("#mainproductpicture").attr("src", $(this).attr("src")); 

      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }); 

     $('#smallpicturefour').click(function() { 
      $("#mainproductpicture").attr("src", $(this).attr("src")); 

      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }); 

     $('#smallpicturefive').click(function() { 
      $("#mainproductpicture").attr("src", $(this).attr("src")); 

      $('#mainproductpicture').addpowerzoom({ 
       defaultpower: 2, 
       powerrange: [2, 5], 
       largeimage: null, 
       magnifiersize: [200, 200] //<--no comma following last option! 
      }) 
     }); 
    }); 
</script> 

私はjavascriptのコードについては、別の関連質問があります。私は私が非常にきれいに周りの画像をズームすることができますオンラインで見つけたJavascriptライブラリを使用しています。しかし、srcを別の画像に切り替えると、ズームは最初のままになります。だから私はクリックするたびにイメージにライブラリを「フックする」。 これは私が気づいていないネガティヴなパフォーマンスヒットを持っていますか？現在の世代は私の後にきれいにきれいになりますか？

Answer 1

ちょうど私がsticklerだから、優れたセレクタを使用することでコードの繰り返しを減らすことで、JSコードを非常にシンプルにすることができます。セレクタをカンマで区切ってセレクタを連結することができます。

<script type="text/javascript"> 
jQuery(document).ready(function ($) { //fire on DOM ready 
    $('#mainproductpicture').addpowerzoom({ 
     defaultpower: 2, 
     powerrange: [2, 5], 
     largeimage: null, 
     magnifiersize: [200, 200] //<--no comma following last option! 
    }) 

    $('#smallpictureone, #smallpicturetwo, #smallpicturethree, #smallpicturefour, #smallpicturefive').click(function() { 
     $("#mainproductpicture").attr("src", $(this).attr("src")); 

     $('#mainproductpicture').addpowerzoom({ 
      defaultpower: 2, 
      powerrange: [2, 5], 
      largeimage: null, 
      magnifiersize: [200, 200] //<--no comma following last option! 
     }) 
    }); 
}); 
</script> 

しかし、これらのIDをまったくターゲティングしておらず、代わりにクラスを使用すると、さらに効果的です。例えば：

$('.smallpicture').click(function(){ /* ... */ }); 

また、事前にあなたの「addpowerzoom」オプションを宣言し、変数の参照を再利用することで、あなたの繰り返しを減らすことができます。例えば：

$('#mainproductpicture').addpowerzoom(powerZoomOpts); 

しかし待っ：パワーズームプラグインを初期化するために、あなたの呼び出しで

その後

var powerZoomOpts = { 
    defaultpower: 2, 
    powerrange: [2, 5], 
    largeimage: null, 
    magnifiersize: [200, 200] 
}; 

！もっとたくさんあります。また、その前に回線上のattr()コールにパワーズームをチェーンすることもできます。例えば：の最終的な結果については

$("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts); 

：

<script type="text/javascript"> 
jQuery(document).ready(function ($) { //fire on DOM ready 
    var powerZoomOpts = { 
     defaultpower: 2, 
     powerrange: [2, 5], 
     largeimage: null, 
     magnifiersize: [200, 200] 
    }; 

    $('#mainproductpicture').addpowerzoom(powerZoomOpts); 

    $('.smallpicture').click(function() { 
     $("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts); 
    }); 
}); 
</script> 

はそれはあまり良く見えませんか？

クロスフェードするには、2つのimg要素が必要です。 1つは他のものの上に位置します。下の画像は、上の画像では見えないようにする必要があります。それはまだsrc属性を持っていません。

第2ステップは、下部のsrcをクロスフェードしたい画像に変更することです（img）。その後、あなたは.fadeOut(200)トップイメージ。コールバック関数を使用して、上部イメージのsrc属性を下部イメージのsrc属性に変更して、次のクロスフェードのイメージセットを 'プライム'にします。

はここに例を示します

var $topimg = $('#topimage'); 
var $bottomimg = $('#bottomimage'); /* cache $topimg & $bottomimg jQuery objects for later use */ 

$('.fadeable-images').click(function(e){ 
    $bottomimg.attr('src', $(this).attr('src')); 
    $topimg.fadeOut(200, function(){ 
    $topimg.attr('src', $bottomimg.attr('src')).show(); 
    }); 
}); 

残りは適切な位置に2個の画像タグを配置するCSSです。

Answer 2

src属性をアニメーション化することはできません（私はそれを書いたとは思えません）。画像をクロスフェードさせたい場合は、画像をクロスフェードし、上の不透明度をアニメートする必要があります。

マイナスのパフォーマンスヒットを持つ「リフック」の場合：いいえ、これはJavascriptの使用方法です。