jQuery 효과

jQuery 효과 - 숨기기 및 표시

숨기기, 표시, 전환, 슬라이드, 페이드 및 애니메이션 적용

jQuery hide() 및 show()

jQuery에서는 hide() 및 show() 메서드를 사용할 수 있습니다. HTML 요소 숨기기 및 표시

구문:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

선택적인 speed 매개변수는 숨기기/표시 속도를 지정합니다. , "느린", "빠른" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 숨기기 또는 표시가 완료된 후 실행될 함수의 이름입니다.

jQuery 토글()

jQuery에서는 토글() 메서드를 사용하여 hide() 및 show() 메서드를 토글할 수 있습니다.

숨겨진 요소를 표시하고 표시된 요소를 숨깁니다.

구문:

$(selector).toggle(speed,callback);

선택적인 속도 매개변수는 숨기기/표시 속도를 지정하며 "느린", "빠른" 또는 밀리초 값을 사용할 수 있습니다.

선택적인 콜백 매개변수는 전환() 메서드가 완료된 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".hot").toggle();
  });
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>

Fade

jQuery 페이딩 방법

jQuery를 사용하면 요소의 페이드 효과를 얻을 수 있습니다.

jQuery에는 다음 네 가지 페이드 메서드가 있습니다.

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

jQuery fadeIn() 메서드

jQuery fadeIn()은 페이드 인에 사용됩니다. 숨겨진 요소.

구문:

$(selector).fadeIn(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다. .

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

jQuery fadeOut() 메서드

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

구문:

$(selector).fadeOut(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

jQuery fadeToggle() 메소드

jQuery fadeToggle() 메소드는 fadeIn()과 fadeOut() 메소드 사이를 전환할 수 있습니다.

fadeToggle()은 이미 페이드 아웃된 요소에 페이드 인 효과를 추가합니다.

fadeToggle()은 이미 페이드 인된 요소에 페이드 아웃 효과를 추가합니다.

구문:

$(selector).fadeToggle(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

jQuery fadeTo() 메소드

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

구문:

$(selector).fadeTo(speed,opacity,callback);

필수 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

fadeTo() 메서드의 필수 불투명도 매개변수는 페이드 효과를 지정된 불투명도(0에서 1 사이의 값)로 설정합니다.

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

Sliding

jQuery 슬라이딩 방법

jQuery를 사용하면 요소에 슬라이딩 효과를 만들 수 있습니다.

jQuery에는 다음과 같은 슬라이딩 메소드가 있습니다.

slideDown()

slideUp()

slideToggle()

jQuery SlideDown() 메소드

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

구문:

$(selector).slideDown(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

jQuery SlideUp() 메소드

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

구문:

$(selector).slideUp(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body> 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

jQuery SlideToggle() 메소드

jQuery SlideToggle() 메소드는 SlideDown()과 SlideUp() 메소드 사이를 전환할 수 있습니다.

요소가 아래로 슬라이드되면 SlideToggle()이 요소를 위로 슬라이드합니다.

요소가 위로 슬라이드되면 SlideToggle()이 요소를 아래로 슬라이드합니다.

$(selector).slideToggle(speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

Animation

jQuery 애니메이션 - animate() 메서드

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

구문:

$(selector).animate({params},speed,callback);

필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

jQuery 애니메이션 중지

jQuery stop() 메소드

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

stop() 메서드는 슬라이드, 페이드 및 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 기능과 함께 작동합니다.

문법:

$(selector).stop(stopAll,goToEnd);

선택적인 stopAll 매개변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며 활성 애니메이션만 중지하고 대기 중인 애니메이션이 뒤로 실행되도록 허용합니다.

선택적인 goToEnd 매개변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.

따라서 기본적으로 stop()은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.

다음 예에서는 매개변수 없는 stop() 메서드를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script> </head> <body> <button>开始动画</button> <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

제출하다 코드 재설정

자동운전