Question

JSFIDDLE

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

如果再次单击，如何使字体大小恢复为原始大小。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

也就是说，在CSS中进行转换并在JS代码中切换元素的类是更好的练习（并且导致更平滑的效果），如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使它基于CSS，这使JS部分更少：

＆＃13;

$("button").click(function(){
	$("h1").toggleClass('size-50');
})

＆＃13;

.size-50{
    font-size:50px;
}
h1{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;.toggle
}

＆＃13;

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

＆＃13;

单击时，Jquery将fontSize设置回原始大小

2 个答案: