显示和隐藏类（onClick）答案

【问题标题】：Show and Hide class (onClick)显示和隐藏类（onClick）
【发布时间】：2015-05-03 00:19:00
【问题描述】：

上传我在按钮上使用来自 Bootstrap 3 的字形图标，该按钮使用 CSS3 关键帧旋转，我想（.hide）这个类，直到单击按钮，然后它会出现/显示，然后旋转。 ..像它一样制作动画？

这是我的小提琴：

http://jsfiddle.net/DannyJardine/8djrcwnb/4/

<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
Upload</button>

【问题讨论】：

标签： html css twitter-bootstrap jquery-animate

【解决方案1】：

您可以将 css 用于此类功能，并使用 jQuery 的 toggleClass 属性：

$('button').click(function() {
   $('.togglable').toggleClass("active");
});

button {
  height: 50px; /*just some styling for the button*/
  width: 50px;
  border-radius: 50%;
  background: red;
  box-shadow: inset 2px 2px 10px white, inset -2px -2px 10px black;
  outline: none;
}
.togglable {
  font-size: 0;
  height: 0;
  width: 0;
  transition: all 1s; /*speed of animation*/
  transform-origin:center center;
  text-align:center;
  margin:0 auto;
}
.active {
  font-size: 50px;
  height: 50px;
  width: 400px;
  transform: rotate(720deg); /*multiple of 360 to ensure animation finishes 'straight'*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>
<div class="togglable active">Press the red button to toggle me!!!</div>

【讨论】：

【解决方案2】：

使用 Show n hide JQuery..Trial and Error 解决了这个问题

$(document).ready(function() {
 $('.glyphicon-refresh-animate').hide();
});

$("button").click(function(){
$(".glyphicon-refresh-animate").show();
});

感谢大家的帮助...

【讨论】：