当前位置:小鱼儿玄机二站 > 操作系统 > jQuery实现动画效果的简单实例,animated选择器用法

jQuery实现动画效果的简单实例,animated选择器用法

文章作者:操作系统 上传时间:2019-09-12

一、供给原因 如今jQuery已经是贰个比较成熟的框架了,而且据说他的插件也会有为数十分的多种,本例笔者手动用jQuery实现二个卡通效果的例子。

本文实例陈诉了jQuery中:animated选择器用法。分享给大家供大家参谋。具体剖判如下:

二、具体贯彻

此接纳器匹配全体正在实践动画效果的要素。
能够应用animate()方法创制自定义动画。

复制代码 代码如下:

语法结构:

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQuery完成动画效果</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<style type="text/css">
     #test {
         position:relative;
         width:100px;
         height:100px;
         border:1px solid #0050d0;
         background:#96e555;
          cursor:pointer;
     }
</style>
<script type="text/javascript">
     $(function(){
         $("#test").css("optcity","0.5");//设置不透明
         $("#test").click(function(){
              $(this).animate({left:"400px",height:"200px",opacity:"1"},300)
                      .animate({top:"200px",width:"200px"},300)
                      .fadeOut("slow");
         });
     });
</script>
</head>
<body>
     <div id="test"></div>
</body>
</html>

复制代码 代码如下:

三、运维结果

$(":animated")

图片 1

此选用器一般也要和其余接纳器协作使用,举个例子类选用器和要素选拔器等等。譬如:

您可能感兴趣的篇章:

  • jQuery 选择器、DOM操作、事件、动画
  • 犀利的jQuery 要点归咎(三) jQuery中的事件和卡通(下:动画篇)
  • 犀利的jQuery 要点归咎(三) jQuery中的事件和卡通(上:事件篇)
  • JQuery选用器绑定事件及修改内容的格局
  • jQuery 管理页面包车型大巴风浪详解
  • jQuery中ready事件用法实例
  • jquery事件preventDefault()方法用法实例
  • 浅谈jQuery事件绑定原理
  • 用队列模拟jquery的动画算法实例
  • 依照jquery和svg达成超炫耀的动画片特效
  • JQuery中的事件及动画用法实例

复制代码 代码如下:

$("li:animated").css("background-color","blue")

以上代码能够将正在施行动画下过的li成分的背景颜色设置为茶绿。
一经不和其他选拔器同盟使用,则私下认可状态是和*选取器合营使用,举个例子$(":animated")等同于$("*:animated")。

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
li{
  list-style-type:none;
  width:150px;
  height:30px;
}
.run{background-color:green;}
.static{background-color:#603;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  function runit(){
    $(".run").animate({width:"250px"});
    $(".run").animate({width:"150px"},runit);
  }
  $("button").click(function(){
    runit();
    $("li:animated").css("background-color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li class="run"></li>
  <li class="static"></li>
</ul>
<button>点击起始动画</button>
</body>
</html>

以上方可将动画片成分的背景颜色设置为石磨蓝。

梦想本文所述对大家的jQuery程序设计有着扶助。

你或者感兴趣的篇章:

  • jQuery中animate()方法用法实例
  • jQuery的animate函数学习记录
  • 利用jquery animate创造平滑滚动作效果应(能够是到顶端、到底层或钦定地点)
  • JQuery动画animate的stop方法应用详解
  • jquery中animate动画积攒的消除办法
  • jquery animate实现鼠标放上去显示离开遮蔽效果
  • jQuery动画animate方法运用介绍
  • jQuery中animate用法实例解析

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:jQuery实现动画效果的简单实例,animated选择器用法

关键词: