Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie verwende ich jquery:animated selector?

黄舟
Freigeben: 2017-06-23 10:50:32
Original
1081 Leute haben es durchsucht

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>
});
Nach dem Login kopieren

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

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>
Nach dem Login kopieren

Grammatikstruktur:

$(":animated")
Nach dem Login kopieren

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")
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage