Question

我正在使用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专家可以帮助我。

Answer 1

我制作新的jquery函数＆＃34; adipoliDestroy＆＃34;，它会从元素中摧毁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'
    });
}

Adipoli jQuery图像悬停效果

1 个答案: