jquery animate例子实践

墨蓝 2022-08-07 09:39 172阅读 0赞

<html>  
<head>  
  <script src="js/jquery-1.3.1.js"></script>  
   
  <script>  
  $(document).ready(function()\{  
     
    $("\#show").click(function () \{  
      var n = $("div").queue("fx");  
      $("span").text("Queue length is: " + n.length);  
    \});  
    function runIt() \{  
   //控制div在1秒之内出现  
      $("div").show(1000);  
   //控制div每隔两秒就右移一段距离  
      $("div").animate(\{left:'+=200',top:'+=200'\},2000);  
   //控制div收起  
      $("div").slideToggle("slow");  
   //控制div放下  
      $("div").slideToggle("slow");  
   //控制div每隔两秒就左移一段距离  
      $("div").animate(\{left:'-=200',top:'-=200'\},2000);  
      //$("div").hide("slow");  
      //$("div").show(1000);  
      $("div").slideUp("normal", runIt);  
    
    \}  
    runIt();

\});  
  </script>  
  <style>  
  div \{ margin:3px; width:40px; height:40px;  
        position:absolute; left:0px; top:30px;  
        background:green; display:none; \}  
  div.newcolor \{ background:blue; \}  
  span \{ color:red; \}  
  </style>  
</head>  
<body>  
  <button id="show">Show Length of Queue</button>  
  <br><span></span>  
  <br><div></div>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery之动画animate(animate、stop、finish、delay、queue、clearQueue)

文章目录 animate stop、finish、delay queue 、clearQueue animate

傷城~/ 2023年07月22日 03:45/ 0 赞/ 20 阅读

相关 jquery中css()与animate()

jquery中用css()可以获取和设置元素的属性，在用css()设置元素的属性时，没有快慢之分，没有速度的控制。而用animate()设置元素的属性时有对速度的控制。在用

超、凢脫俗/ 2022年09月24日 01:17/ 0 赞/ 195 阅读

相关 jQuery--jQuery动画、animate

1.隐藏和显示 hide()；隐藏 show()；显示 slideDown(), slideUp(): 只会改变元素的高度 fadeIn(), fadeOu

待我称王封你为后i/ 2022年09月22日 04:55/ 0 赞/ 209 阅读

相关 jquery animate例子实践

<html> <head> <script src="js/jquery-1.3.1.js"></script> <script> $(do

墨蓝/ 2022年08月07日 09:39/ 0 赞/ 173 阅读

相关 JQuery的animate

animate(params, options) ：用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属

Myth丶恋晨/ 2022年08月02日 09:38/ 0 赞/ 181 阅读

相关 jQuery--animate()方法

一般来说，用animate()是用来执行CSS属性集的自定义动画的。该方法通过CSS样式将元素从一个状态改编为另一个状态。CSS属性值是逐渐改编的，这样子我们可iuk恶意创建动

叁歲伎倆/ 2022年07月12日 11:46/ 0 赞/ 170 阅读

相关 jQuery--animate()方法

一般来说，用animate()是用来执行CSS属性集的自定义动画的。该方法通过CSS样式将元素从一个状态改编为另一个状态。CSS属性值是逐渐改编的，这样子我们可iuk恶意创建动

旧城等待，/ 2022年07月12日 11:46/ 0 赞/ 207 阅读

相关 jQuery 效果 - animate() 方法

jQuery 效果 - animate() 方法 [jQuery 效果参考手册][jQuery] 实例改变 "div" 元素的高度： $(".btn1

太过爱你忘了你带给我的痛/ 2022年06月01日 02:10/ 0 赞/ 232 阅读

相关 jquery小例子

最近写的jquery；练习小程序，有兴趣的同学可以学习下： <!doctype html> <html> <head>

今天药忘吃喽~/ 2022年03月29日 06:30/ 0 赞/ 398 阅读

相关 jQuery效果—animate动画

开发工具与关键技术：Visual Studio 2015 — animate 作者：廖亚星撰写时间：2019年4 月19 日 jQuery animate()方法允

待我称王封你为后i/ 2022年02月13日 13:45/ 0 赞/ 416 阅读