jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)

WBOY
풀어 주다: 2021-12-21 09:00:56
앞으로
3420명이 탐색했습니다.

이 기사에서는 jquery를 사용하여 몇 가지 간단한 애니메이션 효과를 얻는 방법을 살펴보겠습니다. 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>
$(&#39;#btn_show&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img1&#39;).show(3000);  // 3秒之内显示
            })
             $(&#39;#btn_hide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).hide(1000);  // 1秒之内隐藏
            })
             $(&#39;#btn_toggle&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).toggle();  // 显示或隐藏
            })
</script>
로그인 후 복사

jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)

2. 축소/확장

(1) 축소:

slidUp(speed,[callback])
로그인 후 복사

(2) 확장:

slidDown(speed,[callback])
로그인 후 복사

(3) 대체:

slidToggle(speed,[callback])
로그인 후 복사

예는 다음과 같습니다.

 $(&#39;#btn_up&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img2&#39;).slideUp();  //展开
            })
             $(&#39;#btn_down&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideDown(); //收缩
            })
             $(&#39;#btn_slide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideToggle();  //收缩展开交替
            })
로그인 후 복사

출력 결과:

jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)

3. 페이드 인/아웃

(1) 페이드 인:

fadeIn(speed,[callback])
로그인 후 복사

(2 ) 페이드 아웃:

fadeOut(speed,[callback])
로그인 후 복사

          (3) 페이드 인 및 아웃 대체:

fadeToggle(speed,[callback])
로그인 후 복사

예는 다음과 같습니다:

 $(&#39;#btn_fadeIn&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeIn();   //淡入
            })
            $(&#39;#btn_fadeOut&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeOut();  //淡出
            })
            $(&#39;#btn_fade&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeToggle(2000);  //淡入淡出交替
            })
로그인 후 복사

jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)

4 필수 파라. ms 매개변수 애니메이션을 구성하는 CSS 속성을 정의합니다. 선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.

예제는 다음과 같습니다.

$(selector).animate(params,[speed],[easing],[fn])
로그인 후 복사

출력 결과:


추천 관련 동영상 튜토리얼:

jQuery 동영상 튜토리얼jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)

위 내용은 jQuery로 간단한 애니메이션 효과를 구현하는 방법은 무엇입니까? (자세한 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿