How to use jquery :animated selector?-JS Tutorial-php.cn

How to use jquery :animated selector?

黄舟

Release： 2017-06-23 10:50:32

Original

1102 people have browsed it

Who can write me a simple example in a clear format?

// 在一个动画中同时应用三种类型的效果,animate()里面用键值对表示
$("#a").click(function(){   //绑定一个点击事件
  $("#b").animate({         
    width: "90%",           //设置点击之后需要改变之后的样式，以达到动画效果
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );                
  //动画的过度时间 1000<a href="https://www.baidu.com/s?wd=%E6%AF%AB%E7%A7%92&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3nWfYPHR3nHmsP1Nhrjmz0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHfYPHcsrHR3" target="_blank" class="baidu-highlight">毫秒</a>
});

Copy after login

:animated is used to determine whether an element is [still] executing animation

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

Copy after login

<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>

Copy after login

Written when I was studying before, I hope it will be helpful to you.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(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");
    });
});
</script>
</head>
<body>
<button>click me</button>
<div id="box" style="background-color:#000000;height:100px;width:100px">
</div>
</body>
</html>

Copy after login

Grammar structure:

$(":animated")

Copy after login

This selector is generally used in conjunction with other selectors, such as Class Selector and Element Selector etc. For example:

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

Copy after login

The above code can set the background color of the li element under animation to blue.
If not used with other selectors, the default state is to be used with the * selector, for example, $(":animated") is equivalent to $("*:animated").

The above is the detailed content of How to use jquery :animated selector?. For more information, please follow other related articles on the PHP Chinese website!