이 기사에서는 jquery를 사용하여 몇 가지 간단한 애니메이션 효과를 얻는 방법을 살펴보겠습니다. jquery를 통해 간단한 표시 및 숨기기, 축소 및 확장, 페이드 인 및 아웃, 간단한 사용자 정의 애니메이션을 얻을 수 있기를 바랍니다. 모두에게 도움이 되세요!
jQuery는 간단한 애니메이션을 구현합니다
1. 표시/숨기기
(1) 표시:
show(speed,[callback])
속도: 효과 지속 시간. 가능한 값: 느림, 빠름, 밀리초
콜백: 전환이 완료된 후 실행되는 메서드 이름
(2) 숨기기:
hide(speed,[callback])
(3) 대체:
toggle(speed,[callback]),
'show' 다음 ' hide' ';
'hidden'인 경우
예는 다음과 같이 표시됩니다.
//搭建结构 <button id="btn_show">显示图片</button> <button id="btn_hide">隐藏图片</button> <button id="btn_toggle">交替显示隐藏</button> <img src="../素材/im2.jpg" alt="" width="200" style="max-width:90%" id="img1"> <script> $('#btn_show').bind('click',function(){ $('#img1').show(3000); // 3秒之内显示 }) $('#btn_hide').bind('click', function () { $('#img1').hide(1000); // 1秒之内隐藏 }) $('#btn_toggle').bind('click', function () { $('#img1').toggle(); // 显示或隐藏 }) </script>
2. 축소/확장
(1) 축소:
slidUp(speed,[callback])
(2) 확장:
slidDown(speed,[callback])
(3) 대체:
slidToggle(speed,[callback])
예는 다음과 같습니다.
$('#btn_up').bind('click',function(){ $('#img2').slideUp(); //展开 }) $('#btn_down').bind('click', function () { $('#img2').slideDown(); //收缩 }) $('#btn_slide').bind('click', function () { $('#img2').slideToggle(); //收缩展开交替 })
출력 결과:
3. 페이드 인/아웃
(1) 페이드 인:
fadeIn(speed,[callback])
(2 ) 페이드 아웃:
fadeOut(speed,[callback])
(3) 페이드 인 및 아웃 대체:
fadeToggle(speed,[callback])
예는 다음과 같습니다:
$('#btn_fadeIn').bind('click', function () { $('#img3').fadeIn(); //淡入 }) $('#btn_fadeOut').bind('click', function () { $('#img3').fadeOut(); //淡出 }) $('#btn_fade').bind('click', function () { $('#img3').fadeToggle(2000); //淡入淡出交替 })
4 필수 파라. ms 매개변수 애니메이션을 구성하는 CSS 속성을 정의합니다. 선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.
예제는 다음과 같습니다.
$(selector).animate(params,[speed],[easing],[fn])
출력 결과:
jQuery 동영상 튜토리얼
위 내용은 jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!