欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery 来了--动画,停止动画,回调函数Callback,链

程序员文章站 2024-03-25 12:16:28
...

动画

animate()方法

作用:用于创建自定义动画

语法:$(“selector”).animate({params},speed,callback);

参数 params:必需值。定义形成动画的CSS属性

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'200px'});
  });
});
</script> 

<button>开始动画</button><br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

注:默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

animate()–操作多个属性

使用animate()方法生成动画的过程中可同时使用多个属性

注:几乎可以使用animate()方法操作所有CSS属性,但属性名必须使用“驼峰命名法”,如应使用paddingLeft而不是padding-left

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用相对值

相对值:相对于元素的当前值,可以自定义相对值,需要在值的前面加上 += 或 -=

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用预定义的值

可以将属性的动画值设置为”show”,”hide”或”toggle”

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用队列功能

编写多个 animate() 调用,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用

例1.

<script> 
$(document).ready(function(){
  $("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");
  });
});
</script>

<button>开始动画</button> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

例2.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

停止动画

stop()方法

作用:在动画或效果完成之前停止它

语法:$(“selector”).stop(stopAll,goToEnd);

参数 stopAll:可选值。规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行

参数 goToEnd:可选值。规定是否立即完成当前动画,默认是false

默认stop()会清除在被选元素上指定的当前动画

例.

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>

<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

Callback

回调函数Callback在当前动画 100% 完成之后执行

例1.
回调函数会在动画效果完全实现后执行:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(2000,function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>

<button>隐藏</button>
<p>Hello Nico</p>

例2.
未使用回调函数,则在动画效果完成前执行:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>

<button>隐藏</button>
<p>Hello Nico</p>

作用:链允许在一条语句中运行多个jQuery方法(在相同的元素上)

方法链接

如需链接一个动作,只需把该动作追加到之前的动作上

chaining的作用:允许在相同的元素上一条接着一条运行多条jQuery命令。避免浏览器多次查找相同的元素

例.

<script>
$(document).ready(function()
  {
  $("button").click(function(){    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>