Question

我编写了一个小脚本来创建单击图像的克隆并将其扩展为父级ul的大小。我想让克隆以某种方式淡出并淡出，给它一个很好的效果。

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

这是我的jsfiddle：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>

Answer 1

您需要使用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();
            });

    });

});

Answer 2

除了@Stanimir的回答之外，重要的是要注意，在某些情况下，该元素可能尚不存在。听起来您的元素可能属于该类别，因为克隆是在click事件之后创建的。这是一个很好的讨论，在回调之前向$ .on（）方法添加一个小参数： How to register event on elements that don't yet exist?

例如，如果您在页面上有一个元素列表，其中包含$ .on（'click'）事件处理程序，例如带有属性或标记的表单，并且您有一个“加号”图标，可以将另一个标记或属性添加到您的形成。设置事件处理程序时，动态添加到页面的任何新标记描述都不存在，因此除非您按照我上面链接的SO帖子中的说明编写它，否则不会响应。

如何使克隆淡入淡出并在点击图像时淡出？

2 个答案: