jQuery 효과 작업은 1. 기본, 2. 슬라이드, 3. 페이드 인 및 페이드 아웃, 4. 사용자 정의, 5. 설정의 다섯 가지 범주로 나뉩니다. 이 기사에서는 이에 대해 자세히 설명합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 편집기를 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.
효과 작업은 1. 기본, 2. 슬라이드, 3. 페이드 인 및 아웃, 4. 사용자 정의, 5. 설정의 다섯 가지 범주로 나뉩니다. 코드는 다음과 같습니다.
html 코드:
<p style="display: none">Hello</p> <input id="btn1" type="button" value="切换"/>
$("#btn1").click(function(){ $("p").toggle("show"); })
<p></p> <input id="btn1" type="button" value="展开"/> <input id="btn2" type="button" value="收缩"/> <input id="btn3" type="button" value="切换"/>
$("#btn1").click(function(){ $("p").slideDown(); }); 给id为btn1的按钮绑定click事件,当点击展开按钮的时候,p向下展开。 $("#btn2").click(function(){ $("p").slideUp(); }); 给id为btn2的按钮绑定click事件,当点击展开按钮的时候,p向上收缩。 $("#btn3").click(function(){ $("p").slideToggle(); });
fadeIn(), fadeOut(), fadeTo(), fadeToggle()
코드는 다음과 같습니다.
html 코드:
<p></p> <input id="btn1" type="button" value="淡入"/> <input id="btn2" type="button" value="淡出"/> <input id="btn3" type="button" value="切换"/> <input id="btn4" type="button" value="设置透明度"/>
j쿼리 코드:
$("input").first().click(function(){ $("p").fadeIn(1000); });
$("input").eq(1).click(function(){ $("p").stop().fadeOut(1000); //$("p").fadeOut(1000); });
$("input").eq(2).click(function(){ $("p").stop().fadeToggle(1000); })
$("input").eq(3).click(function(){ $("p").stop().fadeTo(1000,0.5); })
animate(), stop(), Delay()
코드는 다음과 같습니다:
css 코드:
p{ width:100px; height:100px; background:red; }
html 코드:
<p>ST宋泽</p> <input id="btn1" type="button" value="显示效果"/> <input id="btn2" type="button" value="停止动画"/>
j쿼리 코드:
$("#btn1").click(function(){ $("p").delay(2000).animate({ "width":"300px", "height":"300px", "font-size":"4em" },5000,function(){ console.log("动画完成") }) });
$("#btn2").click(function(){ $("p").stop(); })
jQuery.fx.off, jQuery.fx.interval
jQuery.fx.off, 페이지의 모든 애니메이션을 끕니다.
jQuery.fx.interval, 애니메이션의 표시 프레임 속도를 설정합니다.
관련 권장 사항:
jQuery 효과 예제 코드 공유HTML5를 사용하여 모방 jQuery 효과 생성
Jquery 효과 컬렉션을 생성하여 컴퓨터 건강 검진 점수 특수 효과 소스 코드 download_jquery
위 내용은 jQuery 효과 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!