테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립트 질문드립니다. 채택완료

다나한포션 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 포인트
Rido
6년 전

https://daneden.github.io/animate.css/">https://daneden.github.io/animate.css/

요런것 활용해 보시면 될거 같네요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

어느정도 애니메이션을 주려고하는데요? 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인