[ jquery选择器 :animated ] 此选择器匹配所有正在执行动画效果的元素

此选择器匹配所有正在执行动画效果的元素

实例:

<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-3.0.0.js‘></script>
<style type=‘text/css‘>
div {
    width: 100px; height: 100px; background: red; position: absolute;
}

#animat+div {
    top: 150px;
}

.focused {
    font: 400 13px/100px ‘Courier New‘; color: #FFF; text-align: center;
}
</style>
<script type=‘text/javascript‘>
    $(function(){
        setInterval(animat,1000);
        function animat(){
           $(‘#animat‘).animate({‘left‘: 500}, 1000,function(){
                if($(this).get(0).offsetLeft >=500)
                     $(this).get(0).style.left = ‘9px‘;
            });
         }
        animat(); //只有通过jQuery中"animat"动画函数执行的才有效果
        $("div:animated").addClass(‘focused‘);
    });
</script>
</head>
<body>
    <div id=‘animat‘>animat</div>
    <div id=‘no-animat‘>no-animat</div>
</body>
</html>
时间: 2024-10-01 02:53:42

[ jquery选择器 :animated ] 此选择器匹配所有正在执行动画效果的元素的相关文章

jQuery演示10种不同的切换图片列表动画效果

经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html lang="en" class="no-

jQuery演示8种不同的图片遮罩层动画效果

效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1> <ul id="sti-menu" class="sti-menu"> <li data-hovercolor="#37c5e9"> <a href="#"> <h2 data-ty

JQuery中常用的选择器

属性选择器 1>  [attribute] 概述:匹配包含给定属性的元素. 示例 jQuery 代码:$("div[id]") 描述:查找所有含有 id 属性的 div 元素 2>  [attribute=value] 概述:匹配给定的属性是某个特定值的元素 3> [attribute!=value] 概述:匹配所有不含有指定的属性,或者属性不等于特定值的元素. 4> [attribute^=value] 概述:匹配给定的属性是以某些值开始的元素 5> [

jQuery的61种选择器

jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签</p> <p id="not">这是第二个p标签</p> <script type="text/javascript"> $(function(){ $("#myId").css("color","red"); });

从零开始学习jQuery (二) 万能的选择器

原文:从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

jQuery入门(1)jQuery中万能的选择器

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应用 编写任何JavaScript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如 “拥有title属性并且值中包含test的<a>元素”,完成这些工作只需要编写一个jQuery选择器字符串, 学习jQuery选择器是学习jQuery最重要

jQuery选择器之过滤选择器

      过滤选择器类似于CSS中的伪类选择器,以冒号开头.过滤选择器根据其过滤规则分为:基本过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.以及表单对象属性过滤选择器. 1.基本过滤选择器 名称        说明                                               举例 :first 匹配到第一个元素 查找表格的第一行:$("tr:first") :last 匹配到最后一个元素 查找表格的最后一行:$(&qu

JQuery选择器——基本筛选选择器

基本筛选选择器 1   基本筛选选择器能更快捷的找到所需的DOM元素 2   基本筛选选择器的描述 $(":first")        匹配第一个元素 $(":last")        匹配最后一个元素 $(":not(selector)")        用来过滤的选择器,选择所有元素取出不匹配给定的选择器元素 $(":eq(index)")        在匹配的集合中选择索引值为index的元素 $(":g

过滤选择器——简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头: 简单过滤选择器是选择器中使用最广泛的一种,其详细说明如下表所示.   选择器 功能 返回值 first() 或 :first 获取第一个元素 单个元素 last() 或 :last 获取最后一个元素 单个元素 :not(selector) 获取除给定选择器外的所有元素 元素集合 :even 获取所有索引值为偶数的元素,索引号从0开始 元素集合 :odd 获取所有索引值为奇数的元素,索引号从0开始 元素集合 :eq(index)