更改<li>

Question

我正在尝试制作效果，在您点击图标的那一刻，他的背景（宽度和高度）增加到页面的100％。但我无法做到的是，“效果”在this.element之下，而在其余部分之下。 我尝试改变位置和zIndex，但我想玩一个列表有点不同.. 我让代码和演示。

HTML

     <ul>
        <li style="z-index:1;">
            <img src=".png" style="width:100px; height:100px; background-color:#11D1AC;">
        </li>
        <li style="z-index:1;">
            <img src=".png" style="width:100px; height:100px; background-color:#787FA7;">
        </li>
        <li style="z-index:1;">
            <img src=".png" style="width:100px; height:100px; background-color:#FF7059;">
        </li>
    </ul>

的js

$('li').on('click', function () {
            var elementoPos = $(this).find('img').position();
            $(this).parent().css("zIndex", 3);
            var elementColor = $(this).find('img').css('backgroundColor');


            var square = document.createElement('div');
            $(square).css({
                "position": "absolute"
                , "zIndex": "2"
                , "width": "50"
                , "height": "50"
                , "left": elementoPos.left + 50 / 2
                , "top": elementoPos.top + 50 / 2
                , "backgroundColor": elementColor
            });
            $('body').append($(square));

            $(square).animate({
                "width": "100vw"
                , "height": "100vh"
                , "left": "0"
                , "top": "0"
            }, function () {
                $(square).animate({
                    opacity: 0
                }, 1500);
            });
            //$('ul').slideUp('slow');

        });

以下是演示： https://fiddle.jshell.net/w4f3aj1z/6/

Answer 1

动态创建的div正在制造问题。

所以在动画结束时尝试$(square).remove();。

$(document).on('click','li', function () {
            var elementoPos = $(this).find('img').position();
            $(this).parent().css("zIndex", 3);
            var elementColor = $(this).find('img').css('backgroundColor');


            var square = document.createElement('div');
            $(square).css({
                "position": "absolute"
                , "zIndex": "2"
                , "width": "50"
                , "height": "50"
                , "left": elementoPos.left + 50 / 2
                , "top": elementoPos.top + 50 / 2
                , "backgroundColor": elementColor
            });
            $('body').append($(square));

            $(square).animate({
                "width": "100vw"
                , "height": "100vh"
                , "left": "0"
                , "top": "0"
            }, function () {
                $(square).animate({
                    opacity: 0
                }, 1500, function() { $(square).remove(); });

            });
            //$('ul').slideUp('slow');

        });

Answer 2

将$(this).css({"z-index": 3,"position":"relative"});更改为：{{1}} - 如果我理解了您想要的内容