Adipoli jQuery圖像懸停效果

Question

我正在使用Adipoli jQuery Image Hover Effects，但我在更改某些屬性時遇到問題。圖像更改爲灰度，onmouseover更改爲顏色，但隨後我設置了單擊圖像時它應保持着色，但它已損壞，因爲它不是替換圖像，而是將圖像添加到頂部並將其添加到另一圖像（但未定義它沒有顯示）。下面是我使用的代碼，但你可以從www.filedropper.com/adipoli-test

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#image1').adipoli({ 
     'startEffect' : 'grayscale', 
     'hoverEffect' : 'popout' 
    }); 
}); 

function select(n){  
    $('#image1').adipoli({ 
     'startEffect' : 'normal', 
     'hoverEffect' : 'popout' 
    });       
} 
</script> 
<div style="width:650px; height: 400px; display:block; margin: 60px;"> 
<a href="javascript:void(0)" onclick="select(1)"><img src="image1.jpg" class="img1" id="image1"></a> 
</div> 

我真的想做到這一點，我希望一些jQuery的專家可以幫我下載完整的例子。

Answer 1

我使新的jQuery功能「adipoliDestroy」，它從元素銷燬adipoli。現在，在元素上重新啓動adipoli之前，請再次調用destroy和init adipoli。

(function($){ 
    $.fn.adipoliDestroy = function(){ 
     var clone = this.clone().css('display', 'block'), 
       wrapper = null; 
     if (wrapper = this.parents('.adipoli-wrapper')){ 
      wrapper.replaceWith(clone); 
     } 
     return clone; 
    } 
})(jQuery); 

function select(n){ 
    $('#image1').adipoliDestroy().adipoli({ 
     'startEffect' : 'normal', 
     'hoverEffect' : 'popout' 
    }); 
}