与CSS中的过渡同时使用jQuery中的fadeIn和fadeOut

debugcn 发表于 Dev

太空飞行员

我正在使用fadeIn和fadeOut将对象设置为动画或不可见。我还想同时为对象的“左”属性设置动画。在我的示例中，此方法适用于fadeOut，但不适用于fadeIn。在我的原始作品中，它可以在fadeIn上使用，但是在fadeOut上，过渡要在淡入之前进行。

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

要使CSS转换与jQuery淡出同时发生，需要做些什么？

$('.wrapper').click(function() {
		var thisInClick = this;
		if ($(thisInClick).hasClass('show')) {
				$(thisInClick).toggleClass('show');
				$(thisInClick).find('.box').fadeOut(1000);
			} else {
				$(thisInClick).toggleClass('show');
				$(thisInClick).find('.box').fadeIn(1000);
			}
});

.wrapper {
  display: block;
  height: 300px;
  width: 800px;
  padding: 100px;
  background: blue;
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "box">
    I AM BOX
  </div>
</div>

小提琴：https : //jsfiddle.net/uev2qzso/1/

编辑：我应该提到原始代码在CSS中使用了不透明度过渡。问题是我要显示的是两个链接，如果在它们的不透明度为0时单击它们；他们会射击。我要避免这种情况。

巴罗

我稍微改变了CSS，使所有动画都显示在屏幕上。如果我理解正确，则可以使用JQuery函数事件回调。在这种情况下是start事件。

$('.wrapper').click(function() {
		var thisInClick = this;
		if ($(thisInClick).hasClass('show')) {
				$(thisInClick).find('.box').fadeOut({
        duration: 1000,
        start: function() {
        		$(thisInClick).toggleClass('show');
        	}
        });
			} else {
				
				$(thisInClick).find('.box').fadeIn({
        duration: 1000,
        start: function() {
        		$(thisInClick).toggleClass('show');
        	}
        });
			}
});

html, body {
  display: inline-block;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.wrapper {
  display: block;
  height: 300px;
  width: 100%;
  padding: 0px;
  background: blue;
  box-sizing: border-box;
}

.box {
  position: relative;
  background: white;
  padding: 50px;
  width: 50px;
  left: 70%;
	display: none;
  transition: left 0.5s ease-out;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "box">
    I AM BOX
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。