![](/img/trans.png)
[英]CSS: Reposition remaining grid elements after onclick event removes some
[英]Don't reposition remaining elements after jQuery fadeOut()
以下是我正在练习的简单游戏的简化示例:
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>
Javascript:
$(".small").click(function() {
$(this).fadeOut();
});
这是在JSFiddle中: https ://jsfiddle.net/rzu1yvpa
当我单击其中一张图像时,它会按预期淡出,但是根据消失的图像,其余图像将重新定位以填充空白区域。 其他图像淡出后,如何使其余图像保持其位置? 我已经搜索和尝试了一段时间,但是我对所有事物都是陌生的,并且不确定我应该寻找什么。
我已经尝试过更改position
和display
属性,但到目前为止没有任何效果。 它看起来像fadeOut()
设置display
的淡出元素的属性none
-也许这就是为什么剩余图像都是无视他们,并填补了空间? 我也尝试过将图像放在引导网格中,但也无法使其正常工作,因此我希望使用非引导解决方案。
jQuery的.fadeOut()
和.fadeIn()
方法可对匹配元素的不透明度进行动画处理,一旦不透明度达到0,display style属性将设置为none
,因此该元素不再影响页面的布局。
这就是导致问题的原因,当显示设置为none
,图像从“流”中删除。
您可以改用jQuery的fadeTo
,它只会淡化到一定程度的不透明,并且不会设置显示。
$(".small").click(function() {
$(this).fadeTo(600,0);
});
您至少有两个选择:
只需使用.fadeTo()( https://api.jquery.com/fadeTo/ )更改单击图像的不透明度,即更改不透明度(css-动画的不透明度为0)
如果您要删除图像本身,则可以使用更硬的方法,例如,可以使用jQuery函数.replaceWith()( http://api.jquery.com/replacewith/ )与具有相同宽度,高度等的div容器交换图像。
问候
Adeneo的回答完美地解释了正在发生的事情。 为了进一步优化您的代码,我建议使用JS和一些CSS:
Java脚本
$('.small').on('click',function(event){
$(this).addClass('small--animation');
});
的CSS
.small {
opacity: 1;
transition: opacity .2s ease-in-out;
}
.small--animation {
opacity: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.