Comment implémenter des effets d’animation simples avec jQuery ? (exemples détaillés)

Dans cet article, voyons comment utiliser jquery pour obtenir des effets d'animation simples. Grâce à jquery, vous pouvez obtenir des animations simples d'affichage et de masquage, de réduction et d'agrandissement, de fondu entrant et sortant, ainsi que des animations personnalisées simples. soyez utile à tout le monde!

jQuery implémente une animation simple

1 Afficher/masquer

(1) Affichage :

show(speed,[callback])

vitesse : durée de l'effet. Valeurs possibles : lente, rapide, millisecondes

rappel : une fois la transition terminée, le nom de la méthode exécutée

(2) Masquer :

hide(speed,[callback])

(3) Alternative :

toggle(speed,[callback]),

Si 'show' alors ' hide' ';

Si 'hidden', l'exemple

est affiché comme suit :

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="../素材/im2.jpg" alt="" width="200"    style="max-width:90%" id="img1"> 
  
<script>
$(&#39;#btn_show&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img1&#39;).show(3000);  // 3秒之内显示
            })
             $(&#39;#btn_hide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).hide(1000);  // 1秒之内隐藏
            })
             $(&#39;#btn_toggle&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).toggle();  // 显示或隐藏
            })
</script>

2. Réduire vers le haut/développer vers le bas

(1) Réduire :

slidUp(speed,[callback])

(2) Développer :

slidDown(speed,[callback])

(3) Alternance :

slidToggle(speed,[callback])

L'exemple est le suivant :

 $('#btn_up').bind('click',function(){
                $('#img2').slideUp();  //展开
            })
             $('#btn_down').bind('click', function () {
                $('#img2').slideDown(); //收缩
            })
             $('#btn_slide').bind('click', function () {
                $('#img2').slideToggle();  //收缩展开交替
            })

Résultat de sortie :

3. Fondu entrant/sortant

(1) dans :

fadeIn(speed,[callback])

(2) fondu sortant :

fadeOut(speed,[callback])

(3) Fondu entrant et sortant alternativement :

fadeToggle(speed,[callback])

L'exemple est le suivant :

 $('#btn_fadeIn').bind('click', function () {
                $('#img3').fadeIn();   //淡入
            })
            $('#btn_fadeOut').bind('click', function () {
                $('#img3').fadeOut();  //淡出
            })
            $('#btn_fade').bind('click', function () {
                $('#img3').fadeToggle(2000);  //淡入淡出交替
            })

4. Les paramètres définissent les propriétés CSS qui forment l'animation. Le paramètre optionnel de vitesse précise la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois l'animation terminée.

L'exemple est le suivant :

$(selector).animate(params,[speed],[easing],[fn])

Résultat de sortie :

Tutoriels vidéo associés recommandés :

Tutoriel vidéo jQuery

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!