CSS转换和jQuery之间的冲突消退

我正在尝试创建一个带有一个小菜单的平铺墙来显示：没有一些基于他们的类的元素.在我的CSS中,我有CSS转换,导致fadeIn和fadeOut不起作用.如果我添加一个时间,元素将花费很长时间消失,但​​

... . . 我正在尝试创建一个带有一个小菜单的平铺墙来显示：没有一些基于他们的类的元素.在我的CSS中,我有CSS转换,导致fadeIn和fadeOut不起作用.如果我添加一个时间,元素将花费很长时间消失,但​​没有实际的褪色.

CSS：

.block:not(.noTransition),.block a img,#main_side p,#main_content,#menu_container{    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    -ms-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}

使用jQuery的JavaScript：

$(document).ready(function(){    $('.button').not("#all").click(function(){        var theId = $(this).attr('id');        $('.block').not('.'+theId).addClass("noTransition");        $('.block').not('.'+theId).fadeOut('slow',function(){            $('.block').not('.'+theId).addClass("covered");            $('.block').not('.'+theId).removeClass("noTransition");        });        $('.'+theId).addClass("noTransition");        $('.'+theId).fadeIn('slow',function(){            $('.'+theId).removeClass("covered");            $('.'+theId).removeClass("noTransition");            });        getScreenSize();    });    $("#all").click(function(){        $('.block').removeClass("covered");        $('.block').show();    });    getScreenSize();});

如果我从CSS中删除转换,则淡入淡出确实起作用,但我也希望保持转换以在元素被显示/隐藏后重新定位元素.

.

解决方法

. 我要说最干净的解决办法就是在你要褪色的元素周围放一个额外的元素.例如,如果你试图淡化这个元素：

<div id="fade"></div>

你制作html：

<div id="fade-parent">      <div id="fade"></div> </div>

然后你就会淡化父母：

$('#fade-parent').fadeIn();

并且不需要丑陋的修复.

. . .. ...