jquery 지연() 소개 및 사용법guide_jquery-JS 튜토리얼-php.cn

jquery 지연() 소개 및 사용법guide_jquery

WBOY

풀어 주다： 2016-05-16 16:37:58

원래의

1209명이 탐색했습니다.

지연(기간,[queueName])

대기열에 있는 후속 항목의 실행을 지연시키려면 지연을 설정하세요.
jQuery 1.4의 새로운 기능. 대기열에 있는 기능의 실행을 지연하는 데 사용됩니다. 애니메이션 대기열의 실행을 지연하거나 사용자 정의 대기열에서 사용할 수 있습니다.

기간: 지연 시간, 단위: 밀리초

queueName: 대기열 명사, 기본값은 Fx, 애니메이션 대기열입니다.

매개변수 설명 속도 선택사항. 지연 속도를 지정합니다.

参数	描述
speed	可选。规定延迟的速度。可能的值：毫秒 "slow" "fast"
queueName	可选。规定队列的名称。默认是 "fx"，标准效果队列。

参数

描述

speed

可选。规定延迟的速度。

可能的值：

毫秒
"slow"
"fast"

queueName

可选。规定队列的名称。

默认是 "fx"，标准效果队列。

가능한 값:

밀리초
"느림"
"빠르게"

대기열 이름 선택사항. 큐의 이름을 지정합니다.

$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});

로그인 후 복사

기본값은 표준 효과 대기열인 "fx"입니다.

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
  $("#div3").delay(800).fadeIn();
  $("#div4").delay(2000).fadeIn();
  $("#div5").delay(4000).fadeIn();
 });
});
</script>
</head>

<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>
</body>
</html>

로그인 후 복사

전체 테스트 코드:

예:

$(document).ready(function() {
 $('#header')
 .css({ 'top':-50 })
 .delay(1000)
 .animate({'top': 0}, 800);

 $('#footer')
 .css({ 'bottom':-15 })
 .delay(1000)
 .animate({'bottom': 0}, 800); 
});

로그인 후 복사

머리 및 바닥 지연 로딩 애니메이션 효과