jQuery动画效果详解-优快云博客

本文介绍了jQuery中的动画效果实现方法，包括基本的显示、隐藏、淡入淡出、滑动及复杂的动画效果。通过实例展示了如何使用jQuery简化网页交互设计。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
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);
  });
JQuery 效果语法
