Jquery 动画 fontSize 在单击时恢复到原始大小

Question

<强> JSFIDDLE

$("button").click(function(){
$("h1").animate({fontSize: "50px"});

如何让再次点击时字体大小恢复到原来的大小。

Answer 1

您可以通过检查当前字体大小然后切换要设置的值来实现此目的，如下所示:

$("button").click(function() {
  $("h1").animate({
    fontSize: $('h1').css('font-size') == '32px' ? "50px" : '32px'
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK</button>
<h1>HELLO</h1>

也就是说，在 CSS 中进行转换并在 JS 代码中切换元素上的类是更好的做法(并产生更平滑的效果)，如下所示:

$("button").click(function() {
  $("h1").toggleClass('large');
})

h1 { transition: all 0.5s; }
.large { font-size: 50px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK</button>
<h1>HELLO</h1>