jQuery效果


隐藏和显示元素

//显示某个元素
$("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);

文章作者: 小游
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小游 !
  目录