使用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切換到另一個圖像時，縮放仍保留在第一個圖像上。因此，我每次點擊圖像時都會將庫重新連接到圖像上。 這是否有我不知道的負面表現打擊？當前的gen會在我之後正確清理嗎？

Answer 1

只因爲我是一個堅守者;您可以通過使用更好的選擇器來減少代碼重複，從而超級簡化您的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」選項並重新使用變量引用來減少重複次數。例如：

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

然後在調用初始化電動變焦插件：

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

別急！還有更多。您也可以將powerzoom鏈接到之前的線路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> 

那豈不是長得這麼好？

爲了交叉淡入淡出（如其他人所述）您必須有兩個img元素。一個位於另一個之上。底部圖像應該從頂部的圖像開始隱藏。它將不具有src屬性。

第二步是將底部img的src更改爲想要交叉淡入淡出的圖像。然後你.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(); 
    }); 
}); 

剩下的就是CSS來對準兩個圖像標記在適當的位置。

Answer 2

你不能動畫src屬性（我不相信我只是寫了那個）。如果你想讓你的圖像交叉淡入淡出，你必須把它們放在另一個上面，併爲頂部的不透明度設置動畫。

至於你的「重新掛鉤」有一個負性能命中：否。這是應該使用Javascript的方式。