자바스크립트 질문드립니다. 채택완료
다나한포션
6년 전
조회 1,772
안녕하세요
공지사항 최신글을 슬라이드 업해서 사용하고 있습니다.
1.25초 마다 글이 올라가면서 움직이는건데요..
너무 딱딱해 보여서 움직일때마다 애니메이션을 주고 싶습니다.
(opacity 0.5 였다가 1 로 바뀌는 형식 같은거..)
소스는 아래와 같습니다
</p>
<p>
<script>
var casel_auto = true;
var casel_speed = 1250; // 기본1.25초설정
var casel_time;</p>
<p>function runNowTimer() {</p>
<p> casel_time = setInterval(showSlideUp, casel_speed);
casel_auto = true;
}</p>
<p>function showSlideUp() {</p>
<p> var index = 0;
var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();
var id = $(".bo_lst_in_casel:eq(" +index+ ")").attr("id");</p>
<p> $(".bo_lst_in_casel:eq(" +index+ ")").slideDown(100, function(){
$(".bo_lst_in_casel:eq(" +index+ ")").remove();
});</p>
<p> $(".bo_lst_casel_in").append("<dd id='" +id+ "' class='bo_lst_in_casel'>" + html + "</dd>");</p>
<p>}</p>
<p>function showNowNext() {</p>
<p> var index = 0;
var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();
var id = $(".bo_lst_in_casel:eq(" +index+ ")").attr("id");</p>
<p> $(".bo_lst_in_casel:eq(" +index+ ")").slideUp(0, function(){
$(".bo_lst_in_casel:eq(" +index+ ")").remove();
});</p>
<p> $(".bo_lst_casel_in").append("<dd id='" +id+ "' class='bo_lst_in_casel'>" + html + "</dd>");</p>
<p>}</p>
<p>$(".casel_control span").click(function(){</p>
<p> if($(this).index() == 0)
{
var index = $(".bo_lst_in_casel").length - 1;
var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();</p>
<p> $(".bo_lst_in_casel:eq(" +index+ ")").slideUp(100, function(){
$(".bo_lst_in_casel:eq(" +index+ ")").remove(100);
});</p>
<p> $(".bo_lst_in_casel:eq(0)").before("<dd class='bo_lst_in_casel'>" + html + "</dd>");
}
else
{
showNowNext();
}</p>
<p>});</p>
<p>$(".bo_lst_cont").mouseenter(function(){
if(!casel_auto) return false;
clearInterval(casel_time);
casel_auto = false;
});</p>
<p>$(".bo_lst_cont").mouseleave(function(){
runNowTimer();
});</p>
<p>runNowTimer();
</script></p>
<p>
slideDown(100, function(){
이부분에 100 이걸 건드려봐도 반응은 똑같길래
정안되면 css에서 해보려 하는데 감이 안잡히네요 ㅠ
염치없지만 고수님들에게 도움을 요청해봅니다...
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
6년 전
https://daneden.github.io/animate.css/">https://daneden.github.io/animate.css/
요런것 활용해 보시면 될거 같네요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인