在jQuery中使用fadeIn和fadeOut与CSS中的转换同时使用

我正在使用fadeIn和fadeOut来设置对象进出视图的动画。我还想同时为对象的“左”属性设置动画。在我的示例中，这适用于淡出，但不适用于淡出。在我的原创作品中，它在fadeIn上起作用，但在fadeOut上，过渡出现在fade之前

也就是说，对象首先移动到其新位置，然后淡出

需要做什么才能使CSS转换与jQuery转换同时发生

$（'.wrapper'）。单击（函数（）{
var thisInClick=此；
if（$（thisInClick）.hasClass（'show'））{
$（thisInClick）.toggleClass（'show'）；
$（thisInClick）.find（'.box'）.fadeOut（1000）；
}否则{
$（thisInClick）.toggleClass（'show'）；
$（thisInClick）.find（'.box'）.fadeIn（1000）；
}
});
.wrapper{
显示：块；
高度：300px；
宽度：800px；
填充：100px；
背景：蓝色；
}
.盒子{
位置：相对位置；
背景：白色；
填充：50px；
宽度：100px；
左：70%；
显示：无；
过渡：左0.5s缓解；
}
.wrapper.show.box{
左：10%；
}

我是盒子
使用此代码
.fadeToggle（）。它将帮助您
您可以尝试此解决方案，将淡入淡入CSS


.wrapper{
显示：块；
高度：300px；
宽度：800px；
填充：100px；
背景：蓝色；
}
.盒子{
位置：相对位置；
背景：白色；
填充：50px；
宽度：100px；
左：70%；
不透明度：0；
过渡：所有0.5s缓解；
}
.wrapper.show.box{
左：10%；
不透明度：1；
}
$（'.wrapper'）。单击（函数（）{
var thisInClick=此；
$（thisInClick）.toggleClass（'show'）；
});
我是盒子
关于您的编辑行。当元素具有
opacity:0
时，可以使用CSS属性
pointer events:none
，然后当元素具有
opacity:1
时，可以使用
pointer events:all
来避免单击或触发链接。希望这有帮助
 我稍微更改了css，以便在屏幕上显示所有动画。
如果我理解正确，可以使用JQuery函数events callback。在这种情况下，
启动
事件


$（'.wrapper'）。单击（函数（）{
var thisInClick=此；
if（$（thisInClick）.hasClass（'show'））{
$（thisInClick）.find（'.box'）.fadeOut({
持续时间：1000，
开始：函数（）{
$（thisInClick）.toggleClass（'show'）；
}
});
}否则{
$（thisInClick）.find（'.box'）.fadeIn({
持续时间：1000，
开始：函数（）{
$（thisInClick）.toggleClass（'show'）；
}
});
}
});
html，正文{
显示：内联块；
宽度：100%；
边际：0px；
填充：0px；
}
.包装纸{
显示：块；
高度：300px；
宽度：100%；
填充：0px；
背景：蓝色；
框大小：边框框；
}
.盒子{
位置：相对位置；
背景：白色；
填充：50px；
宽度：50px；
左：70%；
显示：无；
过渡：左0.5s缓解；
}
.wrapper.show.box{
左：10%；
}

我是盒子
我应该在问题中提到这是原始代码。问题是我显示的是两个链接，如果你在它们有不透明度时单击它们：0；他们将开火。我需要避免这一点。我将此标记为答案，因为它比其他答案更适合这个问题。我选择使用指针事件：无；在CSS中寻找一种更干净、最简单的方法。虽然这不能直接回答问题，但它以最干净的方式解决了我最初的问题。我选择了这个。是的，这可能是最干净最简单的方法。如果这对你有帮助，你能投票吗？：）
.wrapper {
  display: block;
  height: 300px;
  width: 800px;
  padding: 100px;
  background: blue;
}

.box {
  position: relative;
  background: white;
  padding: 50px;
  width: 100px;
  left: 70%;
  opacity:0;
  transition: all 0.5s ease-out;
}

.wrapper.show .box {
  left: 10%;
  opacity:1;
}


$('.wrapper').click(function() {
        var thisInClick = this;
        $(thisInClick).toggleClass('show');
});



<div class = "wrapper">
  <div class = "box">
    I AM BOX
  </div>
</div>