隐藏和显示元素
//显示某个元素
$("p").show();
//隐藏某个元素
$("p").hide();
//带有参数(延时隐藏)
$("p").hide(1000);
//带有方法的隐藏
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
//toggle方法(就是在隐藏和显示之间来回切换,中间同样可以加参数)
$("p").toggle();
淡入淡出
//淡入淡出有四种方法
//淡入
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
//淡出
$("#div1").fadeOut();
//淡入淡出切换
$("#div1").fadeToggle();
//透明度切换(切换到指定的透明度)
$("#div1").fadeTo("slow",0.15);
滑动(默认给元素隐藏)
//下滑
$("#panel").slideDown();
//上滑
$("#panel").slideUp();
//切换
$("#panel").slideToggle();
动画
这个主要就是animate函数操作各种属性
//元素向左移250像素
$("div").animate({left:\'250px\'});
//同时操作多个属性
$("div").animate({
left:\'250px\',
opacity:\'0.5\',
height:\'150px\',
width:\'150px\'
});
//使用相对值
$("div").animate({
left:\'250px\',
height:\'+=150px\',
width:\'+=150px\'
});
//队列功能(这里就是这个元素按照顺序去执行这些属性)
$("button").click(function(){
var div=$("div");
div.animate({height:\'300px\',opacity:\'0.4\'},"slow");
div.animate({width:\'300px\',opacity:\'0.8\'},"slow");
div.animate({height:\'100px\',opacity:\'0.4\'},"slow");
div.animate({width:\'100px\',opacity:\'0.8\'},"slow");
});
停止动画
这个就是停止当前的动画
$("#panel").stop();
链
使用链,我们可以把所有的动作和方法都链接到一起
$("#p1").css("color","red").slideUp(2000).slideDown(2000);