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

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

WBOY

Libérer： 2016-05-16 16:38:37

original

1278 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

4. Arrêter l'animation

stop(clearQueue, gotoEnd)

Copier après la connexion

5. Créez des animations personnalisées

animate(properties, duration, easing, callback)

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

Copier après la connexion

Si vous écrivez une fonction d'extension.

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

Copier après la connexion

6. Personnaliser l'animation du zoom

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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)//为队列中所有未执行的动画添加延迟

Copier après la connexion

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.