jQuery 애니메이션 특수 효과 예제 tutorial_jquery

본 글에서는 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();
 }
  });
});

작동 효과는 아래와 같습니다.

요소의 표시 상태를 전환하려면 토글 메소드를 사용할 수도 있습니다.

$(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 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다.