728x90
반응형
Effect 메소드
hide()
show()
toggle()
slideUp()
slideDown()
slideToggle()
fadeOut()
fadeIn()
fadeTo()
fadeToggle()
animate()
1. 연습코드(body)
<style type="text/css">
img{width:200px; height:200px; position:absolute; left:200px; top:200px;}
p{width:100px; border:1px solid red; position:absolute; left:10px; display:none};
</style>
</head>
<body>
<b>이펙트 메서드</b>
<div>
<p>hide()</p>
<p>show()</p>
<p>toggle()</p>
<p>slideUp()</p>
<p>slideDown()</p>
<p>slideToggle()</p>
<p>fadeOut()</p>
<p>fadeIn()</p>
<p>fadeTo()</p>
<p>fadeToggle()</p>
<p>animate()</p>
</div>
<img alt="image" src="resources/image/img02.jpg" id="img01"/>
</body>
2. script
fadeTo는 투명도(opacity)를 조정하여 이미지를 show/hide 하기 때문에
fadeIn/Out과 사용할 경우 이미 설정된 opacity값이 있어 원활하게 작동하지 않을 수 있다.
나는 fadeTo기능은 사용하지 않도록 하겠다:D
<script type="text/javascript">
$(function(){
$("b").click(function(){
$("p").toggle();
$("p").each(function(i){
$(this).animate({
"top": 50*(i+1) + "px"
}, 1000);
});
});
$("p").bind("click", function(){
$(this).css("background","lime");
$(this).siblings("p").css("background","");
if($(this).is("p:contains(hide)")){
$("img").hide();
}
if($(this).is("p:contains(show)")){
$("img").show();
}
if($(this).is("p:contains(toggle)")){
$("img").toggle();
}
if($(this).is("p:contains(slideUp)")){
$("img").slideUp();
}
if($(this).is("p:contains(slideDown)")){
$("img").slideDown();
}
if($(this).is("p:contains(fadeOut)")){
$("img").fadeOut();
}
if($(this).is("p:contains(fadeIn)")){
$("img").fadeIn();
}
if($(this).is("p:contains(fadeToggle)")){
$("img").fadeToggle();
}
if($(this).is("p:contains(animate)")){
$("img").animate({
"width": 300 + "px",
"height": 300 + "px"
});
}
});
});
728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]effect_03 (0) | 2020.08.03 |
|---|---|
| [JQ]effect_02 (0) | 2020.08.03 |
| [JQ]event (0) | 2020.08.03 |
| [JQ]DOM_기타탐색메소드 (0) | 2020.07.31 |
| [JQ]DOM_트리탐색메소드 (0) | 2020.07.31 |
