Introduction à l'utilisation de la méthode d'animation jQuery

Fonctions pour créer des animations personnalisées.
Valeur de retour : jQuery animate(params, [duration], [easing], [callback])

Si vous utilisez caractères comme "hide", "show" ou "toggle" String valeur, le mode d'animation par défaut sera appelé pour l'attribut . paramsOptions Un ensemble de packages

Contenant des attributs de style comme attributs d'animation et valeurs finales et une collection de leurs valeurs

objet params {}, remarque : tous les attributs spécifiés doivent être en chameau formulaire, comme l'utilisation de marginLeft, remplace margin-left Si une valeur de chaîne telle que "hide",

"show" ou "toggle" est utilisée, le formulaire d'animation par défaut sera appelé. pour cette propriété.

durée (facultatif) Une chaîne de l'une des trois vitesses prédéterminées (« lente », « normale » ou « rapide ») ou une valeur en millisecondes représentant la durée de l'animation (telle que : 1000)

easing (facultatif)StringLe nom de l'effet d'effacement à utiliser (prise en charge du plugin requise) Par défaut, jQuery fournit une fonction "linéaire" et "swing"

rappel (facultatif). Fonction exécutée lorsque l'animation est terminée

0. Arrêter l'animation

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

instance animée :
1 p après avoir cliqué sur le bouton Plusieurs. différents attributs de l'élément changent ensemble

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

2. Déplacez l'élément spécifié vers la gauche ou la droite

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

3. Changez la hauteur et la transparence du paragraphe dans les 600 millisecondes

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

4. Utilisez 500 millisecondes pour déplacer le paragraphe vers la position gauche de 50 et afficher complètement clairement (la transparence est de 1)

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

5. Changer d'affichage et de masquage

$(".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; 
    }); 
});

//滚动焦点
$(window).scroll(function () {              //当前窗口的滚动事件
var winTop = $(window).scrollTop();     //获取当前窗口的大小
var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标
});

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!