Maison > Article > interface Web > Comment utiliser jquery : sélecteur animé ?

Comment utiliser jquery : sélecteur animé ?

黄舟original: 2017-06-23 10:50:321083parcourir

Qui peut m'écrire un exemple simple dans un format clair ?

// 在一个动画中同时应用三种类型的效果,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 est utilisé pour déterminer si un élément exécute [toujours] une 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>");
        }
    });
});

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

Écrit lorsque j'étudiais auparavant, j'espère que cela sera utile pour toi.

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

Structure grammaticale :

$(":animated")

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que sélecteur de classe et dispositif de sélection d'élément etc. Par exemple :

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

Le code ci-dessus peut définir la couleur d'arrière-plan de l'élément li animé sur bleu.
S'il n'est pas utilisé avec d'autres sélecteurs, l'état par défaut doit être utilisé avec le sélecteur *, par exemple, $(":animated") est équivalent à $("*:animated").

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Sélecteur jQuery : explication détaillée de l'utilisation de l'en-têteArticle suivant：Sélecteur jQuery : explication détaillée de l'utilisation de l'en-tête

Articles Liés

Voir plus