[英]Don't reposition remaining elements after jQuery fadeOut()
The following is a simplified example of a slightly less simple game I am working on as practice: 以下是我正在练习的简单游戏的简化示例:
The HTML: HTML:
<div>
<img class="small" src="http://vignette4.wikia.nocookie.net/rickandmorty/images/d/dd/Rick.png/revision/latest?cb=20131230003659">
<img class="small" src="https://ih0.redbubble.net/image.111135319.1949/flat,800x800,075,f.u1.jpg">
<img class="small" src="http://67.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png">
</div>
The Javascript: Javascript:
$(".small").click(function() {
$(this).fadeOut();
});
And here it is in a JSFiddle: https://jsfiddle.net/rzu1yvpa 这是在JSFiddle中: https ://jsfiddle.net/rzu1yvpa
When I click on one of the images, it fades out as expected, but depending on which image disappears, the remaining images are re-positioned to fill the empty space. 当我单击其中一张图像时,它会按预期淡出,但是根据消失的图像,其余图像将重新定位以填充空白区域。 How can I make the remaining images keep their positions after other images have faded out?
其他图像淡出后,如何使其余图像保持其位置? I have been searching and experimenting with this for a while now, but I am new to all things web, and am not sure what I should be looking for.
我已经搜索和尝试了一段时间,但是我对所有事物都是陌生的,并且不确定我应该寻找什么。
I have tried changing the position
and display
properties, but nothing has worked so far. 我已经尝试过更改
position
和display
属性,但到目前为止没有任何效果。 It looks like fadeOut()
sets the display
property of the faded out element to none
- maybe this is why the remaining images are ignoring them and filling the space? 它看起来像
fadeOut()
设置display
的淡出元素的属性none
-也许这就是为什么剩余图像都是无视他们,并填补了空间? I have also tried putting the images in a bootstrap grid, but haven't been able to get that to work either, and would prefer a non-bootstrap solution. 我也尝试过将图像放在引导网格中,但也无法使其正常工作,因此我希望使用非引导解决方案。
jQuery's .fadeOut()
and .fadeIn()
methods animates the opacity of the matched elements, and once the opacity reaches 0, the display style property is set to none
, so the element no longer affects the layout of the page. jQuery的
.fadeOut()
和.fadeIn()
方法可对匹配元素的不透明度进行动画处理,一旦不透明度达到0,display style属性将设置为none
,因此该元素不再影响页面的布局。
This is what is causing the issue, when the display is set to none
, the image is removed from the "flow". 这就是导致问题的原因,当显示设置为
none
,图像从“流”中删除。
You could use jQuery's fadeTo
instead, which just fades to a degree of opacity, and does not set the display. 您可以改用jQuery的
fadeTo
,它只会淡化到一定程度的不透明,并且不会设置显示。
$(".small").click(function() {
$(this).fadeTo(600,0);
});
you have atleast two options: 您至少有两个选择:
Just change opacity of clicked image with .fadeTo() ( https://api.jquery.com/fadeTo/ ) that is just change of opacity (css - opacity to 0 with animation) 只需使用.fadeTo()( https://api.jquery.com/fadeTo/ )更改单击图像的不透明度,即更改不透明度(css-动画的不透明度为0)
or harder way if you want to remove image itself you can swap it with div container for example with same width, heigth etc. using for example jq function .replaceWith() ( http://api.jquery.com/replacewith/ ) 如果您要删除图像本身,则可以使用更硬的方法,例如,可以使用jQuery函数.replaceWith()( http://api.jquery.com/replacewith/ )与具有相同宽度,高度等的div容器交换图像。
Greetings 问候
The answer of Adeneo explains perfectly what's happening. Adeneo的回答完美地解释了正在发生的事情。 To further optimise your code I'd suggest to use JS and a bit CSS instead:
为了进一步优化您的代码,我建议使用JS和一些CSS:
Javascript Java脚本
$('.small').on('click',function(event){
$(this).addClass('small--animation');
});
CSS 的CSS
.small {
opacity: 1;
transition: opacity .2s ease-in-out;
}
.small--animation {
opacity: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.