我怎么能使克隆淡入和淡入淡出点击图像

How can i make clone fade in and fade out on click of image?

本文关键字：淡入 淡出 出点 图像 怎么能      更新时间：2023-09-26

我已经编写了一个小脚本来创建一个克隆的点击图像，并将其展开到父ul的大小。我想让克隆在某种程度上淡出，淡出给它一个很好的效果。

注意:如果你看到任何代码改进，请指出它们，以便修复。

这是我的jsfield: http://jsfiddle.net/jnLLLtt4/1/

Jquery: 

$(document).ready(function () {
    $('.thumb-item').on('click', function() {
        var currentId =     $(this).attr('id'),
            extraimg =      $('#' + currentId).clone(),
            currentOffset = $('#' + currentId).offset(),
            parent =        $('.image-gallery'),
            parentOffset =  parent.offset();
        extraimg
            .css({
                'position': 'absolute',
                'background-position': 'top',
                'top': currentOffset.top + 'px',
                'left': currentOffset.left + 'px',
                'margin': '0'
            })
            .appendTo(parent)
            //make bigger
            extraimg.css({
                'height': parent.height() + 'px',
                'width': parent.width() + 'px',
                'top': parentOffset.top + 'px',
                'left': parentOffset.left + 'px'
            })
            .on('click', function () {
                $(this).stop(true).remove();
            });
    });
});
html: 

<ul class="image-gallery">
<li class="thumb-item" id="image_1" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_2" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_3" style="background-image:url('http://placehold.it/200x200');"></li>
<li class="thumb-item" id="image_4" style="background-image:url('http://placehold.it/200x200');"></li>
</ul>

您需要使用fadeIn()和fadeOut() http://jsfiddle.net/jnLLLtt4/2/

$(document).ready(function () {
    $('.thumb-item').on('click', function() {
        var currentId =     $(this).attr('id'),
            extraimg =      $('#' + currentId).clone(),
            currentOffset = $('#' + currentId).offset(),
            parent =        $('.image-gallery'),
            parentOffset =  parent.offset();
        extraimg
            .css({
                'position': 'absolute',
                'background-position': 'top',
                'top': currentOffset.top + 'px',
                'left': currentOffset.left + 'px',
                'margin': '0'
            })
            .fadeIn(400).appendTo(parent);
            //make bigger
            extraimg.css({
                'height': parent.height() + 'px',
                'width': parent.width() + 'px',
                'top': parentOffset.top + 'px',
                'left': parentOffset.left + 'px'
            })
            .on('click', function () {
                $(this).fadeOut();
            });
    });
});

值得注意的是，除了@Stanimir的答案之外，在某些情况下元素可能还不存在。听起来您的元素可能属于这一类，因为克隆是在单击事件之后创建的。这里有一个关于在回调之前向$.on()方法添加一个小参数的很好的讨论:如何在不存在的元素上注册事件?

例如，如果你有一个$.on('click')事件处理程序在页面上的元素列表，就像一个带有属性或标签的表单，你有一个"plus"图标来添加另一个标签或属性到你的表单。当设置事件处理程序时，动态添加到页面的任何新标签描述都不存在，因此除非您按照我上面链接到的so帖子中的描述编写，否则不会响应。

相关文章：