JQuery, slide() / 요소 사라지기, 나타나기

slide()

 

slideUp(), slideDown(), slideToggle()은 반드시 <img> 태그에 width, height 속성을 주어야 한다
그렇지 않으면 toggle()와 똑같은 동작을 한다

 

slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다

speed : "slow" or "fast" or milliseconds(1/1000초)

---

slide()	특징
slideUp	요소 기준 왼쪽 상단으로 올라간다. * 가로 세로 길이를 주면 커튼처럼 올라간다
slideDown	요소 기준 왼쪽 상단에서 내려온다.
fadeIn	투명해지며 나타난다
fadeOut	투명해지며 사라진다
slideToggle	slideUp / slideDown 이 번갈아 가며 움직인다 * 가로 세로 길이를 주면 커튼처럼 올라간다
toggle	slideUp / slideDown 이 번갈아 가며 움직인다 * 가로 세로 길이가 주어져도 왼쪽 상단으로 올라갔다 내려갔다 한다.

 

$('img').slideDown(500)

$('img').fadeIn(1000) //단위 1/1000초 나타난다

$('img').fadeOut(1000)//단위 1/1000초 사라진다

$('img').slideToggle(1000)

$('img').toggle(1000)

 

---

사진보기

 

<div id="grayLayer"></div>
<div id="overLayer"></div>

<ul>
	<li>
		<a href="../image/photo1.jpg" class="modal">
		<img src="../image/photo1_thum.jpg" alt="샹드리아"/>
		</a>
	</li>
    //....
</ul>

$('a.modal').click(function(){
	$('#grayLayer').fadeIn(300);
	$('#overLayer').fadeIn(300);

	$('#overLayer').html('<img src="' + $(this).attr('href') + '"/>');

	return false;
});

$('#grayLayer').click(function(){
	$(this).fadeOut(300);
	$('#overLayer').fadeOut(300)
})

 

 

opacity: 0.60;  /* 0.0 ~ 1.0, 값이 작을수록 더 투명하게 만든다. */