쿠키문의-애니메이션 동작없이 바로 숨김상태가 되려면 정보
쿠키문의-애니메이션 동작없이 바로 숨김상태가 되려면
본문
안녕하세요. :)
아래는 숨기기,보이기 소스입니다.
영카트의 오늘본 상품처럼 새로고침 하였을때, 쿠키 저장이 되어서,
새로고침을 하더라도, 선택한 숨기기나 보이기 상태를 기억합니다.
문제는 숨기기로 선택한 후 새로고침을 하면, 보이기 상태에서 슬라이딩 애니메이션이
작동되면서, 숨기기 상태로 돌아가는데요.
숨기기기 선택 후 새로고침 하였을때, 애니메이션 동작없이 바로 숨기기 상태가 되려면 어떻게해야 되나요?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type='text/javascript' src="../js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<style type='text/css'>
a {display:block;line-height:1em;}
#resize01 {overflow:hidden;background:#ffffff;}
#viewmore, #viewless {
margin:5px 0 0 0;
padding:3px 5px;
background:#598296;
color:#fff;
width:90px;
display:inline-block;
text-decoration:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#viewless').hide();
$('#viewmore').click(function(){
var el = $('#resize01'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 300);
$('#viewmore').hide();
$('#viewless').show();
$.cookie('viewmore', true);
});
$('#viewless').click(function(){
$('#resize01').animate({height: '0'}, 300);
$('#viewmore').show();
$('#viewless').hide();
$.cookie('viewmore', false);
});
if($.cookie('viewmore') == 'true'){
$('#viewmore').click();
} else {
$('#viewless').click();
}
});//]]>
</script>
<div id="resize01">
<table width="1220" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left>
<img src="<?=$g4['path']?>/images/intro.jpg" border="0">
</td>
</tr>
</table>
</div>
<a href="#" id="viewmore">+ 보이기</a>
<a href="#" id="viewless">- 숨기기</a>
아래는 숨기기,보이기 소스입니다.
영카트의 오늘본 상품처럼 새로고침 하였을때, 쿠키 저장이 되어서,
새로고침을 하더라도, 선택한 숨기기나 보이기 상태를 기억합니다.
문제는 숨기기로 선택한 후 새로고침을 하면, 보이기 상태에서 슬라이딩 애니메이션이
작동되면서, 숨기기 상태로 돌아가는데요.
숨기기기 선택 후 새로고침 하였을때, 애니메이션 동작없이 바로 숨기기 상태가 되려면 어떻게해야 되나요?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type='text/javascript' src="../js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<style type='text/css'>
a {display:block;line-height:1em;}
#resize01 {overflow:hidden;background:#ffffff;}
#viewmore, #viewless {
margin:5px 0 0 0;
padding:3px 5px;
background:#598296;
color:#fff;
width:90px;
display:inline-block;
text-decoration:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#viewless').hide();
$('#viewmore').click(function(){
var el = $('#resize01'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 300);
$('#viewmore').hide();
$('#viewless').show();
$.cookie('viewmore', true);
});
$('#viewless').click(function(){
$('#resize01').animate({height: '0'}, 300);
$('#viewmore').show();
$('#viewless').hide();
$.cookie('viewmore', false);
});
if($.cookie('viewmore') == 'true'){
$('#viewmore').click();
} else {
$('#viewless').click();
}
});//]]>
</script>
<div id="resize01">
<table width="1220" cellpadding="0" cellspacing="0">
<tr>
<td valign=top align=left>
<img src="<?=$g4['path']?>/images/intro.jpg" border="0">
</td>
</tr>
</table>
</div>
<a href="#" id="viewmore">+ 보이기</a>
<a href="#" id="viewless">- 숨기기</a>
댓글 전체
$('#viewmore').hide(); 을
$(window).load(function(){
$('#viewmore').hide();
$('#viewless').hide();
해주면 될듯...
$(window).load(function(){
$('#viewmore').hide();
$('#viewless').hide();
해주면 될듯...
콩주삼님 답변 감사드립니다. :)
el.height(curHeight).animate({height: autoHeight}, 300);
$(window).load(function(){
$('#viewmore').hide();
$('#viewless').show();
});
이렇게 하였는데, 여전히 애니메이션이 발생해요.
말씀하신 내용이 이렇게 적용하는 것이 맞나요? ㅜㅜ
el.height(curHeight).animate({height: autoHeight}, 300);
$(window).load(function(){
$('#viewmore').hide();
$('#viewless').show();
});
이렇게 하였는데, 여전히 애니메이션이 발생해요.
말씀하신 내용이 이렇게 적용하는 것이 맞나요? ㅜㅜ
슈와이님 답변 감사드립니다. :)
말씀하신대로 적용을 하였는데,
숨기기 후 새로고침을 누르고, 보이기를 하면, 애니메이션 작동이 안되는데,
어떻게 해결 방법이 없을까요?
말씀하신대로 적용을 하였는데,
숨기기 후 새로고침을 누르고, 보이기를 하면, 애니메이션 작동이 안되는데,
어떻게 해결 방법이 없을까요?
