javascript - Adipoli jQuery图像悬停效果

我正在使用Adipoli jQuery Image Hover Effects，但是在更改某些属性时遇到问题。图像变为灰度，鼠标悬停变为颜色，但是然后我设置为单击图像时应保持彩色，但它已损坏，因为不是替换图像，而是在顶部添加了图像，并在其上添加了另一个图像（但未定义，因此它没有显示）。以下是我正在使用的代码，但是您可以从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专家可以帮助我。

最佳答案

我制作了新的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'
    });
}