jQuery 중지 애니메이션, jQuery Callback 함수, jQuery - Chaining
31341 단어 callback
jQuery stop() 메서드는 애니메이션이나 효과가 완료되기 전에 애니메이션을 중지하는 데 사용됩니다.
stop () 방법은 슬라이딩, 페이드 아웃, 사용자 정의 애니메이션을 포함한 모든 jQuery 효과 함수에 적용됩니다.
$(selector).stop(stopAll,goToEnd);선택적 stopAll 매개 변수는 애니메이션 큐를 지워야 하는지 여부를 결정합니다.기본값은false입니다. 즉, 활성화된 애니메이션만 정지하고, 대기열에 배열된 애니메이션은 뒤로 실행할 수 있습니다.
선택할 수 있는 goToEnd 매개 변수는 현재 애니메이션을 즉시 완성할지 여부를 규정합니다.기본값은 false입니다.
따라서 기본적으로 stop () 은 선택한 요소에 지정된 현재 애니메이션을 지웁니다.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(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>jQuery stop() 애니메이션(매개변수 포함)
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</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="start"> </button>
<button id="stop"> </button>
<button id="stop2"> </button>
<button id="stop3"> </button>
<p><b>" "</b> 。</p>
<p><b>" "</b> ， 。</p>
<p><b>" "</b> ， ； 。</p>
<p><b>" "</b> ， 。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>2. jQuery Callback 함수
JavaScript 명령문(명령어)이 하나씩 실행되기 때문에 - 애니메이션 이후의 명령문은 애니메이션이 아직 완료되지 않았기 때문에 오류나 페이지 충돌이 발생할 수 있습니다.이를 방지하기 위해 Callback 함수를 매개 변수로 추가할 수 있습니다.애니메이션이 100% 완료되면 Callback 함수를 호출합니다.$(selector).hide(speed,callback)
오류(callback 없음)
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>정확함(콜백 있음)
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>3. jQuery - Chaining
jQuery를 통해 동작/방법을 연결할 수 있습니다.Chaining은 한 문장에 여러 개의 jQuery 방법을 허용합니다. (같은 요소에서)
링크 (chaining) 라는 기술이 있는데, 같은 요소에서 여러 개의 jQuery 명령을 실행할 수 있으며, 하나는 다른 하나에 이어진다.
이렇게 하면 브라우저는 같은 요소를 여러 번 찾을 필요가 없다.동작을 연결하려면, 이 동작을 이전 동작에 간단하게 추가하십시오.
다음 예는 css (), slideUp (), and slideDown () 을 연결합니다.'p1'요소는 먼저 빨간색으로 변한 다음에 위로 미끄러진 다음에 아래로 미끄러진다.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
</script>
</head>
<body>
<p id="p1">jQuery ！</p>
</body>만약 필요하다면, 우리도 여러 가지 방법을 추가해서 호출할 수 있다.링크를 진행할 때 코드 줄이 매우 나빠집니다.그러나 jQuery는 문법적으로 엄격하지 않다.접기와 들여쓰기를 포함하는 원하는 형식으로 쓸 수 있습니다.또한 다음과 같이 쓰기를 실행할 수 있습니다.
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
</script>
</head>
<body>
<p id="p1">jQuery ！</p>
</body>jQuery는 여분의 빈칸을 버리고, 행장 코드에 따라 위의 코드 줄을 실행합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콜백 함수를 Angular 하위 구성 요소에 전달이 예제는 구성 요소에 함수를 전달하는 것과 관련하여 최근에 직면한 문제를 다룰 것입니다. 국가 목록을 제공하는 콤보 상자 또는 테이블 구성 요소. 지금까지 모든 것이 구성 요소 자체에 캡슐화되었으며 백엔드에 대한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
