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' 
    }); 
}