JQuery 效果语法

Jquery中$(document).ready()Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，两者区别在于。1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。         $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同          window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个          $(document).ready()可以同时编写多个，并且都可以得到执行3.简化写法          window.onload没有简化写法          $(document).ready(function(){})可以简写成$(function(){});【显示/隐藏】点击隐藏$("#hideButtonId").click(function(){  $("#hideContent").hide();});点击显示$("#showId").click(function(){  $("#hideContent").show();});点击隐藏变显示，或者显示变隐藏
$("#toggleId").click(function(){  $("#toggleContent").toggle();});

【淡入/淡出】

点击淡入

$("#fadeInId").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

parameter:
null normal speed
slow
fast
3000 3000ms

点击淡出
$("#fadeOutId").click(function(){  $("#div1").fadeOut();  $("#div2").fadeOut("slow");  $("#div3").fadeOut(3000);});

same as the upper one

点击显示的淡入隐藏，隐藏的淡出显示
$("#fadeToggleId").click(function(){  $("#div1").fadeToggle();  $("#div2").fadeToggle("slow");  $("#div3").fadeToggle(3000);});

点击逐渐变为透明，透明参数介于0和1之间

$("#fadeToId").click(function(){  $("#div1").fadeTo("slow",0.15);  $("#div2").fadeTo("fast",0.4);  $("#div3").fadeTo(3000,0.7);});

【滑动】

向下滑动
$("#slideDownButtonId").click(function(){  $("#slideDownContentId").slideDown();});向上滑动
$("#slideUpButtonId").click(function(){  $("#slideUpContentId").slideUp();});
隐藏的向下滑动，显示的向上滑动
$("#slideToggleButtonId").click(function(){  $("#slideToggleContentId").slideToggle();});

【动画】

移动位置
$("#moveButtonId").click(function(){  $("#moveButtonContentId").animate({left:'250px'});
  $("#moveButtonContentId").animate({left:'0px'});
 }); 
提示：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止，然后把left属性改为0。

改变属性
$("#modifyPropertyButtonId").click(function(){  $("#modifyPropertyContentId").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

属性增加，变大
$("#enhanceButtonId").click(function(){  $("#enhanceContentId").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });});
显示或隐藏
$("#toggleButtonId").click(function(){  $("#toggleContentId").animate({    height:'toggle'  });});

执行队列
$("#queueButtonId").click(function(){  var div=$("#queueContentId");  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");});

字体变大
$("#fontEnhanceId").click(function(){  var div=$("#fontEnhanceContentId");  div.animate({left:'100px'},"slow");  div.animate({fontSize:'3em'},"slow");});

【停止】
$(selector).stop(stopAll,goToEnd);
$("#stopButtonId").click(function(){  $("#stopContentId").stop();});
停止活动的：可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
立即完成动画：可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

【CallBack】
$(selector).hide(speed,callback)
正确：会在hide结束后，alert();$("#callBackButtonId").hide(1000,function(){alert("The paragraph is now hidden");});错误：先alert()，后hide；
$("#callBackButtonId").hide(1000,function(){alert("The paragraph is now hidden");});

【Chaining】
相当于一个连续执行。 
$("#ChainingbuttonId").click(function(){
    $("#ChainingContentId").css("color","red").slideUp(2000).slideDown(2000);
  });
或者
$("#ChainingbuttonId").click(function(){    $("#ChainingContentId")   .css("color","red")   .slideUp(2000)   .slideDown(2000);  });