jQuery를 사용하여 요소의 페이드 효과를 만듭니다.
26196 단어 jquery
fadeIn() 은(는) 다음과 같이 요소의 페이드 효과를 숨깁니다.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div1").fadeIn();
$("div2").fadeIn("slow");
$("div3").fadeIn(1000);
});
});
</script>
</head>
<body>
<p> fadeIn() 。</p>
<button> ， </button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>fadeOut() 은 다음과 같은 코드로 표시되는 요소를 페이드아웃합니다.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div1").fadeOut();
$("div2").fadeOut("slow");
$("div3").fadeOut(1000);
});
});
</script>
</head>
<body>
<p> fadeOut() 。</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>fadeTogger () 방법과fadeIn () 방법 사이를 전환합니다. 원소가 희박해지면fadeTogger () 원소에 희박 효과를 삽입하고, 원소가 희박해지면fadeTogger는 원소에 희박 효과를 삽입합니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div1").fadeToggle(1000);
$("div2").fadeToggle(1000);
$("div3").fadeToggle(1000);
});
});
</script>
</head>
<body>
<p> fadeToggle() 。</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>
</body>
</html>fadeTo() 메서드는 다음과 같은 코드로 지정된 불투명도로 그라데이션을 허용합니다.
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div1").fadeTo(1000,0.2);
$("div2").fadeTo("slow",0.3);
$("div3").fadeTo(2000,0.7);
});
});
</script>
</head>
<body>
<p> fadeTo() 。</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>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
