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
WBOYoriginal
2016-05-16 15:05:063098parcourir

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>

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

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 !

Déclaration:
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