/*--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', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); }); </script>