Maison > interface Web > js tutoriel > La combinaison de jQuery animate et CSS3 permet d'obtenir l'effet de poursuite au ralenti avec le code source download_jquery

La combinaison de jQuery animate et CSS3 permet d'obtenir l'effet de poursuite au ralenti avec le code source download_jquery

WBOY
Libérer: 2016-05-16 15:05:06
original
3101 Les gens l'ont consulté

CSS3 et jquery peuvent obtenir l'effet de poursuite simplifié, mais compte tenu de la compatibilité du navigateur, il est recommandé d'utiliser la méthode d'animation jquery pour y parvenir.

Laissez-moi vous montrer l'effet de mise en œuvre comme suit :

Démonstration d'effet Téléchargement du code source

Fichier référencé : jquery-1.11.1.min.js

html

<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
Copier après la connexion

jquery

var $first=$('#first');
var $second=$('#second');
(function(){
move1();
move2();
})()
function move1(){
$first.animate({
"left":220,
"top": 0
},400).animate({
"left":220,
"top":220
},400).animate({
"left":0,
"top":220
},400).animate({
"left":0,
"top":0
},function(){
move1();
})
}
function move2(){
$second.animate({
"right":220,
"bottom": 0
},400).animate({
"right":220,
"bottom":220
},400).animate({
"right":0,
"bottom":220
},400).animate({
"right":0,
"bottom":0
},function(){
move2();
})
}
Copier après la connexion

Ce qui précède est la combinaison de jQuery animate et de CSS3 introduite par l'éditeur pour obtenir l'effet de poursuite au ralenti. J'espère que cela sera utile à tout le monde !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal