Einführung in die Verwendung der jQuery-Animationsmethode

Funktionen zum Erstellen benutzerdefinierter Animationen.
Rückgabewert: jQuery animate(params, [duration], [easing], [callback])

Wenn Sie Zeichen wie „hide“, „show“ oder „toggle“ verwenden, String -Wert, wird der Standardanimationsmodus für das -Attribut aufgerufen. paramsOptions Eine Reihe von Paketen

Enthält Stilattribute als Animationsattribute und Endwerte sowie eine Sammlung ihrer Werte

params object {}, Hinweis: Alle angegebenen Attribute müssen in Camel sein Wenn ein Zeichenfolgenwert wie „hide“, „show“ oder „toggle“ verwendet wird, wird das Standardanimationsformular aufgerufen für diese Immobilie. Dauer (optional) Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“ oder „schnell“) oder ein Millisekundenwert, der die Animationsdauer darstellt (z. B. 1000)

Easing (optional)
String
Der Name des zu verwendenden Löscheffekts (Plugin-Unterstützung erforderlich) Standardmäßig bietet jQuery „linear“ und „swing“

Callback (optional)Funktion Funktion wird ausgeführt, wenn die Animation abgeschlossen ist 0. Animation stoppen

Animationsinstanz:

1 nach dem Klicken auf die Schaltfläche „Mehrere“. verschiedene Attribute des Elements ändern sich gemeinsam

if($('.swaplist,.mainlist').is(':animated')){
    $('.swaplist,.mainlist').stop(true,true);
}

2. Verschieben Sie das angegebene Element nach links oder rechts

$("#go").click(function () {
    $("#block").animate({
        width: "90%",
        height: "100%",
        fontSize: "10em",
        borderWidth: 10
    }, 1000);
});

3. Ändern Sie die Höhe und Transparenz des Absatzes innerhalb von 600 Millisekunden

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
});

4. Verwenden Sie 500 Millisekunden, um den Absatz auf die linke Position von 50 zu verschieben und anzuzeigen es völlig klar (Transparenz ist 1)

$("p").animate({
    height: 'toggle', opacity: 'toggle'
}, "slow");

5. Ein- und Ausblenden umschalten

$("p").animate({
    left: 50, opacity: 'show'
}, 500);

$(".box h3").toggle(function(){ 
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
        $(this).addClass("arrow"); 
        return false; 

    },function(){ 
        $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
        $(this).removeClass("arrow"); 
        return false; 
    }); 
});

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der jQuery-Animationsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!