Question

我写了一个函数，当点击（隐藏一个div并显示另一个div）时，将“菜单”按钮与“关闭”按钮交换，反之亦然。我正在努力为每个交换的切换添加一个动画。

这就是我所拥有的：

$(document).ready(function() {
  $('#menu-button').on('click', function() {
    $('#menu-button').toggleClass('inactive', 1000);
    $('#close-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
  });

  $('.close-trigger').on('click', function() {
    $('#close-button').toggleClass('active').toggleClass('inactive', 1000);
    $('#menu-button').toggleClass('inactive', 1000).toggleClass('active', 1000);
  });
});

我也尝试fadeIn / fadeOut / fadeToggle而不是toggleClass无济于事。 fadeToggle的问题是两个元素同时短暂出现，并且仍然没有淡入淡出动画。有没有更好的方法来编程？

Answer 1

toggleClass()不允许动画。第二个论点不是时间。请参阅文档：

http://api.jquery.com/toggleclass/

我猜你最好的是CSS过渡：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

如果您不想使用转换，那就可以做到：

  $('#menu-button').on('click', function() {
    $('#menu-button').hide();
    $('#close-button').fadeIn();
  });

  $('.close-trigger').on('click', function() {
    $('#close-button').hide();
    $('#menu-button').fadeIn();
  });

Answer 2

请试试这个

＆＃13;

$(document).ready(function() {
  $('#button1').on('click', function() {
    $('#button1').hide();
    $('#button2').show().addClass('toggle');
  });
   $('#button2').on('click', function() {
    $('#button2').hide();
    $('#button1').show().addClass('toggle');
   
  });

  
    
});

＆＃13;

#button2
{
  display:none;
}
.button.toggle
{
    opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="button1" class="button" >button1</button>
<button id="button2" class="button" >button2</button>

＆＃13;

Answer 3

如果您希望使用toggleClass，则必须在样式表中附加CSS转换。否则，元素将消失，因为toggleClass本身不提供动画。

CSS转换很容易添加到样式表中，所有必要的是将这些属性放在您的类的规则上：

transition-property: all;
transition-duration: 0.5s; /* or however long you need it to be */

请注意，display等属性无法设置动画，因此您必须使用opacity等属性来控制外观，该属性可以设置动画，因为它是一个数字。

动画类切换/元素交换

3 个答案: