show()和hide()—隐藏显示
//show()和hide() hide()首先记住display的值,在将display设置为None $(function () { $("#panel h5.head").toggle(function () { $(this).next("div.content").hide(600); }, function () { $(this).next("div.content").show(600); }); });
fadeOut()和fadeIn()—通过不透明度隐藏或显示
//fadeOut() 降低元素的不透明度 //fadeIn() 与fadeOut()相反 $(function () { $("#panel h5.head").mousemove(function () { $(this).next("div.content").fadeOut(); }).mouseout(function () { $(this).next("div.content").fadeIn(); }); })
slideDown()和slideUp()—改变元素高度,向下延深,向上收缩
//slideDown() 改变元素高度 元素由上至下延伸显示 //slideUp() 由下到上收缩 $(function () { $("#panel h5.head").toggle(function () { $(this).next("div.content").slideUp(); }, function () { $(this).next("div.content").slideDown(); }); });
animate()自定义动画
$(function () { $("#panel1").css("opacity", "0.5"); //设置不透明度 $("#panel1").click(function () { $(this).animate({ left: "500px" }, 3000); //以3秒的速度移动 $(this).animate({ left: "+=500px" }, 3000); //以3秒的速度累加移动 $(this).animate({ left: "-=500px" }, 3000); //以3秒的速度累减移动 //多种效果动画,改变样式映射 $(this).animate({ left: "500px", height: "200px" }, 3000); //向右下方移动同步移动 //多种效果可以有序的执行 $(this).animate({ left: "500px" }, 3000); $(this).animate({ height: "200px" }, 3000); //可改为链式: $(this).animate({ left: "500px" }, 3000) .animate({ height: "200px" }, 2000); //综合动画 $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000) .animate({ top: "200px", "200px" }, 3000, function () { $(this).css("border", "5px solid blue"); }) .fadeOut("slow"); }) })
stop()停止当前动画,执行下一个动画
//stop()停止当前动画,执行下一个动画 //stop(clearQueue,gotoEnd);clearQueue:清除当前执行的队列,gotoEnd:调至执行的动画结尾,两个参数均为Bool型,均可选 $(function(){ $("#panel").hover(function(){ $(this).stop() .animate({height:"300px"},3000) //如果此时触发光标移除事件,将继续执行下面的代码,若不想执行下边的代码 //则stop需要参数stop(true); .animate({width:"200px"},2000); },function(){ $(this).stop() .animate({height:"100"},2000); }) })
判断元素是否正在动画状态,若在,不在添加新的动画状态,避免动画积累
//判断元素是否正在动画状态,若在,不在添加新的动画状态,避免动画积累 if(!$("#panel").is(":animate")){ //判断是否处在动画状态上 }
其他动画函数
//其他动画 toggle(speed,[callback]); //切换元素的可见状态 slideToggle(speed,[callback]); //通过高度变化切换可见性 fadeTo(speed,opacity,[callback]); //把元素的不透明度以渐变的方式调整到指定的值