Wie implementiert man einfache Animationseffekte mit jQuery? (ausführliche Beispiele)

In diesem Artikel werfen wir einen Blick darauf, wie Sie mit jquery einige einfache Animationseffekte erzielen können. Mit jquery können Sie einfaches Ein- und Ausblenden, Ein- und Ausblenden sowie einfache benutzerdefinierte Animationen erzielen Seien Sie allen behilflich!

jQuery implementiert einfache Animation

1. Ein-/Ausblenden

(1) Anzeige:

show(speed,[callback])

Geschwindigkeit: Effektdauer. Mögliche Werte: langsam, schnell, Millisekunden

Callback: Nach Abschluss des Übergangs wird der Name der ausgeführten Methode angezeigt

(2) Ausblenden:

hide(speed,[callback])

(3) Alternativ:

toggle(speed,[callback]),

Wenn 'show' dann ' verstecken' ';

Wenn 'versteckt', wird das

Beispiel wie folgt angezeigt:

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="/static/imghw/default1.png"  data-src="../素材/im2.jpg"  class="lazy"   alt=""    style="max-width:90%"  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. Nach oben verkleinern/nach unten erweitern

(1) Verkleinern:

slidUp(speed,[callback])

(2) Erweitern:

slidDown(speed,[callback])

(3) Wechsel:

slidToggle(speed,[callback])

Das Beispiel sieht wie folgt aus:

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

Ausgabeergebnis:

3. Ein-/Ausblenden

) Einblenden:

fadeIn(speed,[callback])

(2) ausblenden:

fadeOut(speed,[callback])

(3) Abwechselnd ein- und ausblenden:

fadeToggle(speed,[callback])

Das Beispiel ist wie folgt:

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

4. Benutzerdefinierte Animation

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

Die notwendigen Parameter Parameter definieren die CSS-Eigenschaften, die die Animation bilden.

Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden.

Der optionale Callback-Parameter ist der Name der Funktion, die nach Abschluss der Animation ausgeführt werden soll.

Das Beispiel lautet wie folgt:

$(function(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })

Ausgabeergebnis:

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie implementiert man einfache Animationseffekte mit jQuery? (ausführliche Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!