Exemple d'effets spéciaux d'animation jQuery tutoriel_jquery

Cet article décrit en détail la méthode d'implémentation des effets spéciaux d'animation jQuery sous forme d'exemples. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

1. Bloc de contenu pliable personnalisé

Le bloc de contenu est le suivant :

<div class="module">
  <div class="caption">
    <span>标题</span>
    <img src="rollup.gif" alt="rollup" title="rolls up this module"/>
  </div>
  <div class="body">
    近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。
  </div>
</div> 

Liez un événement click à l'élément img.

$(function() {
  $('div.caption img').click(function () {
 //先找到img的父级元素，再找该父级元素的子元素
 var $body = $(this).closest('div.module').find('div.body');
 if ($body.is(':hidden')) {
   $body.show();
 } else {
   $body.hide();
 }
  });
});

L'effet de l'opération est comme indiqué ci-dessous :

Pour changer l'état d'affichage d'un élément, vous pouvez également utiliser la méthode toggle.

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle();
  });
});

Ce qui précède n'a pas d'effets d'animation, et parfois cela semble très brusque. En fait, les méthodes show, hide et toggle peuvent toutes avoir des effets d’animation. Par exemple :

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow');
  });
});

Autre exemple :

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow', function() {
   $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
 });
  });
}); 

2. Faire apparaître et disparaître les éléments

fadeIn(speed, callback)    
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

3. Faites glisser l'élément de haut en bas

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

4. Arrêter l'animation

stop(clearQueue, gotoEnd)

5. Créez des animations personnalisées

animate(properties, duration, easing, callback)

$('.classname').animate({opacity:'toggle'},'slow')

Si vous écrivez une fonction d'extension.

$.fn.fadeToggle = function(speed){
  return this.animate({opacity:'toggle'},'slow');
}

6. Personnaliser l'animation du zoom

$('.classname').each(function(){
  $(this).animate({
    width: $(this).width() * 2,
    height: $(this).height() * 2
  });
});

7. Personnaliser l'animation de chute

$('.classname').each(function(){
  $(this)
    .css("position","relative")
    .animate({
      opacity: 0,
      top: $(window).height() - $(this).height() - $(this).position().top
    },'slow',function(){ $(this).hide(); })
});

8. Animation de dissipation personnalisée

$('.classname').each(function(){
  var position = $(this).position();
  $(this)
    .css({
      position: 'absolute',
      top: position.top,
      left:position.left
    })
    .animate({
      opacity: 'hide',
      width: $(this).width()*5,
      height: $(this).height()*5
      top: position.top - ($(this).height() * 5 / 2),
      left: position.left - ($(this).width() * 5 /2)
    },'normal');
});

9. Animation en file d'attente

//动画插入队列
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});
$('img').queue('chain', function(){});

$('button').click(function(){
  $('img').dequeue('chain'); //删除队列中的动画
})

cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration, name)//为队列中所有未执行的动画添加延迟

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour la programmation jQuery de chacun.