/*--var $spn = $("#spnTip");与var $spn=document.getElementById("spnTip")；相等。前面的是jquery封装好的写法，后面的是js原生的写法*/
//三大运算符，“？”前面的布尔值为true则执行“：”前面的那个，反之，则执行“：”后面那个.
$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
1
调用toggle()方法，如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
<body>
<h3>toggle()方法的动画切换效果</h3>
<div>
<h4>
<span class="fl">我喜欢吃的水果</span>
<span class="fr" id="spnTip">显示</span>
</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$("ul").toggle("1000",function(){
$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
})
});
});
</script>
</body>
3
调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。
，亲自调用animate()方法移动并放大<span>元素。
<body>
<h3>制作移动位置的动画</h3>
<span></span>
<div id="tip"></div>
<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=30px',
'+=30px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
});
</script>