jQuery アニメーション特殊効果の例tutorial_jquery-jsチュートリアル-php.cn

jQuery アニメーション特殊効果の例tutorial_jquery

WBOY

リリース： 2016-05-16 16:38:37

オリジナル

1244 人が閲覧しました

この記事では、jQuery アニメーション特殊効果の実装方法をサンプル形式で詳しく説明します。皆さんの参考に共有してください。具体的な方法は以下の通りです。

1. カスタマイズされた折りたたみ可能なコンテンツブロック

コンテンツブロックは次のとおりです:

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

ログイン後にコピー

クリックイベントを 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();
 }
  });
});

ログイン後にコピー

操作効果は以下の通りです:

要素の表示状態を切り替えるには、toggle メソッドを使用することもできます。

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

ログイン後にコピー

上記にはアニメーション効果がなく、非常に唐突に感じられる場合があります。実際、表示、非表示、切り替えのメソッドはすべてアニメーション効果を持たせることができます。例:

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

ログイン後にコピー

別の例:

$(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. 要素をフェードインおよびフェードアウトします

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

ログイン後にコピー

3. 要素を上下にスライドさせます

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

ログイン後にコピー

4. アニメーションを停止します

stop(clearQueue, gotoEnd)

ログイン後にコピー

5. カスタムアニメーションを作成します

animate(properties, duration, easing, callback)

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

ログイン後にコピー

拡張関数を書く場合。

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

ログイン後にコピー

6. ズームアニメーションをカスタマイズします

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

ログイン後にコピー

7. 落下アニメーションをカスタマイズします

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

ログイン後にコピー

8. カスタマイズされた散逸アニメーション

$('.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. キュー内のアニメーション

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

ログイン後にコピー

この記事で説明されている内容は、皆さんの jQuery プログラミングにとって一定の参考になると思います。