suchen

Heim >Web-Frontend >js-Tutorial >Wie verwende ich jquery:animated selector?

Wie verwende ich jquery:animated selector?

黄舟
黄舟Original
2017-06-23 10:50:321091Durchsuche

Wer kann mir ein einfaches Beispiel in einem klaren Format schreiben? 

// 在一个动画中同时应用三种类型的效果,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 wird verwendet, um festzustellen, ob ein Element [noch] eine Animation ausführt 

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

Während meines Studiums geschrieben wurde, hoffe ich, dass es hilfreich sein wird Du. 

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

Grammatikstruktur: 

$(":animated")

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor und Elementauswahlgerät usw. Zum Beispiel: 

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

Der obige Code kann die Hintergrundfarbe des li-Elements, das animiert wird, auf Blau setzen.
Wenn nicht mit anderen Selektoren verwendet, ist der Standardstatus mit dem *-Selektor zu verwenden, zum Beispiel ist $(":animated") äquivalent zu $("*:animated").

Das obige ist der detaillierte Inhalt vonWie verwende ich jquery:animated selector?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Selektor: Detaillierte Erläuterung der Header-VerwendungNächster Artikel：jQuery-Selektor: Detaillierte Erläuterung der Header-Verwendung

In Verbindung stehende Artikel

Mehr sehen