cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery :animated选择器如何使用？

jquery :animated选择器如何使用？

黄舟
黄舟asal
2017-06-23 10:50:321083semak imbas

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

// 在一个动画中同时应用三种类型的效果,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>
});

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

$(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>");
        }
    });
});
<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>

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

<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>

语法结构:

$(":animated")

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

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

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

Atas ialah kandungan terperinci jquery :animated选择器如何使用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery选择器:header的使用详解Artikel seterusnya：jquery中关于stop()和:is(:animated)的使用区别详解

Artikel berkaitan

Lihat lagi