Duveral Duveral - 7 months ago 22
Javascript Question

Change zIndex on <li>

I'm trying to make an effect where, in the moment you click an icon, his background (width and height) is increase to 100% of the page. But what I'm not able to do is that the 'effect' goes under the

this.element
and over the rest.
I tried changing the position and zIndex, but I guess playing with a list is a bit different..
I let the code and the demo.

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');

});


Here is the demo:
https://fiddle.jshell.net/w4f3aj1z/6/

sTx sTx
Answer

Change $(this).parent().css("zIndex", 3); to this: $(this).css({"z-index": 3,"position":"relative"}); - if I understood correctly what you want