在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

Posted 2023-05-08

【中文标题】在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

【英文标题】：Using fadeIn and fadeOut in jQuery at the same time as transition in CSS

【发布时间】：2020-03-30 02:43:07

【问题描述】：

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

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

需要做什么才能让 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 中使用了不透明度过渡。问题是我显示的是两个链接，如果您在它们具有 opacity:0 时单击它们；他们会开火。我需要避免这种情况。

【参考方案1】：

我稍微更改了 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>

【讨论】：

我将此标记为答案，因为它比其他答案更适合该问题。我选择使用指针事件：无；在 CSS 中以一种更简洁、更简洁的方式来实现它。

【参考方案2】：

关于您的编辑行。您可以在元素具有 opacity: 0 时使用 CSS 属性 pointer-events: none，然后在元素为 opacity:1 时使用 pointer-events: all 以避免链接被点击或触发。希望这可以帮助！

【讨论】：

虽然这并不能直接回答问题，但它以最干净的方式解决了我最初的问题。我和这个一起去了。

是的，这可能是最干净、最简单的方法。如果这对您有帮助，您可以投票吗？ :)

【参考方案3】：

你可以试试这个解决方案，将淡入淡出移到 CSS

https://jsfiddle.net/ud6s5yxt/1/

.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>

【讨论】：

我应该在问题中提到这是原始代码。问题是我显示的是两个链接，如果您在它们具有 opacity:0 时单击它们；他们会开火。我需要避免这种情况。

【参考方案4】：

使用此代码.fadeToggle()。它会帮助你