jQuery는 어떤 특수 효과를 얻을 수 있나요? jQuery 특수 효과 사용(코드 예)-JS 튜토리얼-php.cn

이 글의 내용은 jQuery가 어떤 특수효과를 얻을 수 있는지 소개하는 것인가요? jQuery 특수 효과 사용(코드 예) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. [추천 관련 비디오 튜토리얼: jQuery Tutorial]

1. jQuery 효과 - 숨기기 및 표시

Hide() 및 show() 메서드를 사용하여 HTML 요소를 숨기고 표시합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnHide").click(function(){
                $("#myDiv1").hide();
                //语法格式：$(selector).hide(speed,callback);
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。
                // $("#myDiv1").hide(3000,function(){
                //      alert("myDiv1隐藏了");
                // });
            });
            
            $("#btnShow").click(function(){
                $("#myDiv1").show();
                //语法格式：$(selector).show(speed,callback); 
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnHide">隐藏</button>
    <button type="button" id="btnShow">显示</button>
    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

로그인 후 복사

2. jQuery 효과 - 페이드 인 및 페이드 아웃

　　(1) fadeIn() 메서드는 다음과 같습니다. 숨겨진 요소를 페이드 인하는 데 사용됩니다.

　　(2) fadeOut() 메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.

　　(3) fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 사이를 전환할 수 있습니다. 요소가 이미 페이드 아웃된 경우 페이드 인 효과를 추가하세요. 요소가 이미 페이드 인된 경우 페이드 아웃 효과를 추가하세요.

　 (4) fadeTo() 메서드는 주어진 불투명도(0에서 1 사이의 값)에 대한 그라데이션을 허용합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnfadeIn").click(function(){
                $("#myDiv1").fadeIn();
                //语法格式：$(selector).fadeIn(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });
            
            $("#btnfadeOut").click(function(){
                $("#myDiv1").fadeOut();
                //语法格式：$(selector).fadeOut(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeToggle").click(function(){
                $("#myDiv1").fadeToggle();
                //语法格式：$(selector).fadeToggle(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeTo").click(function(){
                $("#myDiv1").fadeTo("slow",0.35); 
                //语法格式：$(selector).fadeTo(speed,opacity,callback);
                //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒；
                //第二个参数是必须的：传入值是透明度，取值在0-1之间
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnfadeIn">fadeIn</button>
    <button type="button" id="btnfadeOut">fadeOut</button>
    <button type="button" id="btnfadeToggle">fadeToggle</button>
    <button type="button" id="btnfadeTo">fadeTo</button>
    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

로그인 후 복사

3. jQuery 효과 - 슬라이딩

　　(1) SlideDown() 메서드는 요소를 아래로 슬라이드하는 데 사용됩니다.

　(2) 요소를 위로 슬라이드하는 데는 SlideUp() 메서드가 사용됩니다.

　(3) SlideToggle() 메서드는 SlideDown()과 SlideUp() 메서드 간에 전환할 수 있습니다. 요소가 이미 아래로 미끄러져 있는 경우 위로 밀어 올립니다. 요소가 위로 슬라이드된 경우 아래로 슬라이드합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btnslideDown").click(function(){
                $("#myDiv1").slideDown();
                //语法格式：$(selector).slideDown(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });
            
            $("#btnslideUp").click(function(){
                $("#myDiv1").slideUp();
                //语法格式：$(selector).slideUp(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。

            });

            $("#btnslideToggle").click(function(){
                $("#myDiv1").slideToggle();
                //语法格式：$(selector).slideToggle(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });

        });
    </script>
</head>
<body>
    <button type="button" id="btnslideDown">slideDown</button>
    <button type="button" id="btnslideUp">slideUp</button>
    <button type="button" id="btnslideToggle">slideToggle</button>
    <div id="myDiv1" style="width:200px;height:100px;background-color:green"></div>
</body>
</html>

로그인 후 복사

4. jQuery 효과 - Animation

animate() 메소드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:'250px'});
                //语法格式：$(selector).animate({params},speed,callback);
                //第一个参数是必须的：值是定义形成动画的 CSS 属性
                //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称
                 
                //第一个参数的css属性也可以使用相对值，像下面这样
                //$("#myDiv1").animate({left:'250px',height:'+=10px',width:'+=10px'});
            });
            
        });
    </script>
</head>
<body>
    <button type="button" id="btn_animate">animate</button>
    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

로그인 후 복사

5. jQuery -- 애니메이션 중지

　 stop() 메소드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다.

　stop() 메소드는 슬라이딩, 페이드 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능에 적용됩니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:'250px'},5000);
            });

            $("#btn_stop").click(function(){
                $("#myDiv1").stop();
                //语法格式：$(selector).stop(stopAll,goToEnd);
                //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
                //可选参数2：规定是否立即完成当前动画。默认是 false。
            });
            
        });
    </script>
</head>
<body>
    <button type="button" id="btn_animate">animate</button>
    <button type="button" id="btn_stop">Stop</button>
    <div id="myDiv1" style="top:50px;width:100px;height:50px;background-color:green;position:absolute;"></div>
</body>
</html>

로그인 후 복사

6. jQuery -- 체인 프로그래밍

체인 프로그래밍: 동일한 요소에 대해 여러 jQuery 명령을 차례로 실행합니다. 이렇게 하면 브라우저가 동일한 요소를 여러 번 찾을 필요가 없습니다. 작업을 연결하려면 해당 작업을 이전 작업에 추가하기만 하면 됩니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){  
            $("#btnLink").click(function(){
                $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnLink">链式编程</button>
    <div id="myDiv1" style="width:100px;height:50px;background-color:green"></div>
</body>
</html>

로그인 후 복사

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 jQuery 특수 효과를 보려면 js 특수 효과 컬렉션을 방문하는 것이 좋습니다!

위 내용은 jQuery는 어떤 특수 효과를 얻을 수 있나요? jQuery 특수 효과 사용(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!