1. slide
<style>
div {
background:#3d9a44;
margin:3px;
width:80px;height:40px;
float:left;
}
</style>
<script>
$(function(){
//slideup
$('#slideup').click(function(){
//형식) $('선택자').slideUp() or slideUp(유지시간,함수)
$('div').slideUp()
})
//slidedown
$('#slidedown').click(function(){
//형식) $('선택자').slideDown() or slideDown(유지시간(초,문자열(slow,fast)),함수)
$('div').slideDown("slow")
})
//slideToggle
$('#slideToggle').click(function(){
//형식) $('선택자').slideToggle() or slideToggle(유지시간(초,문자열(slow,fast)),함수)
$('div').slideToggle("slow")
})
})
</script>
<body>
<button id="slideup">slideup</button>
<button id="slidedown">slidedown</button>
<button id="slideToggle">slideToggle</button>
<p>
<div></div><div></div><div></div><div></div>
</body>
2. fadeIn, fadeOut, fadeToggle
<style>
p {position:relative;width:400px;height:90px;}
div {position:absolute;width:400px;height:65px;
font-size:36px;text-align:center;
color:yellow;background:red;
padding-top:25px;top:0;left:0;display:none;/*처음에는 안보이게 설정*/
}
span {display:none}
</style>
<script>
$(function(){
//fadeIn->서서히 화면이 보이는 경우
$('#fadeIn').click(function(){
//형식 $('선택자').fadeIn(애니메이션 유지시간->함수호출)
$('div').fadeIn(3000,function(){ //div태그를 3초동안 서서히 보여준뒤
$('span').fadeIn(100) //0.1초 -> 1000(초)
})
})
//fadeOut --> 불투명도 감소 -> 서서히 사라짐(투명도)
$('#fadeOut').click(function(){
//형식 $('선택자').fadeOut(애니메이션 유지시간(초,slow,fast)->함수호출)
$('div').fadeOut(3000,function(){ //div태그를 3초동안 서서히 보여준뒤
$('span').fadeIn(100) //0.1초 -> 1000(초)
})
})
//fadeToggle
$('#fadeToggle').click(function(){
//형식 $('선택자').fadeToggle(애니메이션 유지시간(초,slow,fast)->함수호출)
$('div').fadeToggle(3000,function(){ //div태그를 3초동안 서서히 보여준뒤
$('span').fadeIn(100) //0.1초 -> 1000(초)
})
})
})
</script>
<body>
<p>
fade TEST
fade TEST!
fade TEST!!
</p>
<div><span>Success!</span></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
</body>
3. fadeTo
<style>
.small img {border:none; margin:10px; width:60px; height:60px}
</style>
<script>
$(function(){
$('.small a').hover(function(){
var imgname=$(this).attr('href')
//fadeIn,fadeOut-->fadeTo(유지시간,투명도(0 or 1),효과완료후 처리할 함수)
$('.large').fadeTo("slow",0,function(){
$('.large').attr('src',imgname)
}).fadeTo("slow",1)
},function(){})
})
</script>
<body>
<div class="small">
<a href="../img/photo1.jpg"><img src="../img/photo1.jpg"></a>
<a href="../img/photo2.jpg"><img src="../img/photo2.jpg"></a>
<a href="../img/photo3.jpg"><img src="../img/photo3.jpg"></a>
<a href="../img/photo4.jpg"><img src="../img/photo4.jpg"></a>
<a href="../img/photo5.jpg"><img src="../img/photo5.jpg"></a>
<a href="../img/photo6.jpg"><img src="../img/photo6.jpg"></a>
</div>
<img src="../img/photo1.jpg" class="large">
</body>