jquery :animated选择器如何使用？

黄舟原创: 2017-06-23 10:50:32 844浏览

谁能给我写个简单的例子，格式清楚的！

// 在一个动画中同时应用三种类型的效果,animate()里面用键值对表示
$("#a").click(function(){   //绑定一个点击事件
  $("#b").animate({         
    width: "90%",           //设置点击之后需要改变之后的样式，以达到动画效果
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );                
  //动画的过度时间 1000毫秒
});

:animated 用于判断一个元素是否【尚在】执行动画

$(function() {
    // 开始动画
    $("#box").animate({left: 500}, 5000);
        
    $(document).on("click", function() {
        // 在选择器中使用
        if($("#box:animated").length) {
            $("body").append("#box 尚在动画");
        }
        
        // 在 is 中使用
        if(!$("#box").is(":animated")) {
            $("body").append("#box 动画停止");
        }
    });
});

以前学习的时候写的，希望对你有帮助。





$(document).ready(function(){
    $("button").click(function(){
      $("#box").animate({height:300,width:400},"slow");
      $("#box").animate({width:300},"fast");
      $("#box").animate({height:100},"normal");
      $("#box").animate({width:100},"slow");
    });
});

语法结构:

$(":animated")

此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:

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

以上代码能够将正在执行动画下过的li元素的背景颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":animated")等同于$("*:animated")。

以上就是jquery :animated选择器如何使用？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。