Beispiel für jQuery-Animationsspezialeffekte Tutorial_jquery

In diesem Artikel wird die Implementierungsmethode von jQuery-Animationsspezialeffekten anhand von Beispielen ausführlich beschrieben. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

1. Maßgeschneiderter faltbarer Inhaltsblock

Der Inhaltsblock lautet wie folgt:

<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> 

Binden Sie ein Klickereignis an das img-Element.

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

Der Betriebseffekt ist wie folgt:

Um den Anzeigestatus eines Elements zu ändern, können Sie auch die Toggle-Methode verwenden.

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

Das Obige hat keine Animationseffekte und fühlt sich manchmal sehr abrupt an. Tatsächlich können alle Methoden zum Anzeigen, Ausblenden und Umschalten Animationseffekte haben. Zum Beispiel:

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

Ein weiteres Beispiel:

$(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. Elemente ein- und ausblenden lassen

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

3. Schieben Sie das Element nach oben und unten

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

4. Animation stoppen

stop(clearQueue, gotoEnd)

5. Erstellen Sie benutzerdefinierte Animationen

animate(properties, duration, easing, callback)

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

Wenn Sie eine Erweiterungsfunktion schreiben.

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

6. Zoom-Animation anpassen

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

7. Passen Sie die Fallanimation an

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

8. Maßgeschneiderte Dissipationsanimation

$('.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 in der Warteschlange

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

Ich glaube, dass das, was in diesem Artikel beschrieben wird, einen gewissen Referenzwert für die jQuery-Programmierung aller hat.