Adipoli jQuery Imageホバー効果

Question

私はAdipoli jQuery Image Hover Effectsを使用していますが、一部のプロパティを変更する際に問題が発生しています。イメージがグレースケールに変わり、onmouseoverがカラーに変わりますが、イメージをクリックすると色付けされているはずですが、イメージが置き換えられる代わりにイメージが上に追加され、別のイメージに上書きされるため、壊れてしまいます（ただし、それは示されていない）。以下は、私が使用していたコードですが、私は本当にこれを実現したいと思い、私はいくつかのjQueryの専門家が私を助けることができることを願ってい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> 

から完全な例をダウンロードすることができます。

Answer 1

私は要素からアジポリを破壊する新しいjquery関数 "adipoliDestroy"を作成します。要素の上にアディポリを再登録する前に、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' 
    }); 
}