안녕하세요 공지사항 최신글을 슬라이드 업해서 사용하고 있습니다. 1.25초 마다 글이 올라가면서 움직이는건데요.. 너무 딱딱해 보여서 움직일때마다 애니메이션을 주고 싶습니다. (opacity 0.5 였다가 1 로 바뀌는 형식 같은거..) 소스는 아래와 같습니다 [code] var casel_auto = true; var casel_speed = 1250; // 기본1.25초설정 var casel_time; function runNowTimer() { casel_time = setInterval(showSlideUp, casel_speed); casel_auto = true; } funct...

이전 목록 다음

채택완료

자바스크립트 질문드립니다.

다나한포션

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2019-07-17 (수) 13:12:04 1,945

안녕하세요

공지사항 최신글을 슬라이드 업해서 사용하고 있습니다.

1.25초 마다 글이 올라가면서 움직이는건데요..

너무 딱딱해 보여서 움직일때마다 애니메이션을 주고 싶습니다.

(opacity 0.5 였다가 1 로 바뀌는 형식 같은거..)

소스는 아래와 같습니다

Copy

<script>
var casel_auto = true;
var casel_speed = 1250; // 기본1.25초설정
var casel_time;

function runNowTimer() {

    casel_time = setInterval(showSlideUp, casel_speed);
    casel_auto = true;    
}

function showSlideUp() {

    var index = 0;
    var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();
    var id = $(".bo_lst_in_casel:eq(" +index+ ")").attr("id");

    $(".bo_lst_in_casel:eq(" +index+ ")").slideDown(100, function(){
        $(".bo_lst_in_casel:eq(" +index+ ")").remove();
    });

    $(".bo_lst_casel_in").append("<dd id='" +id+ "' class='bo_lst_in_casel'>" + html + "</dd>");

}

function showNowNext() {

    var index = 0;
    var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();
    var id = $(".bo_lst_in_casel:eq(" +index+ ")").attr("id");

    $(".bo_lst_in_casel:eq(" +index+ ")").slideUp(0, function(){
        $(".bo_lst_in_casel:eq(" +index+ ")").remove();
    });

    $(".bo_lst_casel_in").append("<dd id='" +id+ "' class='bo_lst_in_casel'>" + html + "</dd>");

}

$(".casel_control span").click(function(){

    if($(this).index() == 0)
    {
        var index = $(".bo_lst_in_casel").length - 1;
        var html = $(".bo_lst_in_casel:eq(" +index+ ")").html();

        $(".bo_lst_in_casel:eq(" +index+ ")").slideUp(100, function(){
            $(".bo_lst_in_casel:eq(" +index+ ")").remove(100);
        });

        $(".bo_lst_in_casel:eq(0)").before("<dd class='bo_lst_in_casel'>" + html + "</dd>");
    }
    else
    {
        showNowNext();
    }

});

$(".bo_lst_cont").mouseenter(function(){
    if(!casel_auto) return false;
    clearInterval(casel_time);
    casel_auto = false;
});

$(".bo_lst_cont").mouseleave(function(){
    runNowTimer();
});

runNowTimer();
</script>

slideDown(100, function(){

이부분에 100 이걸 건드려봐도 반응은 똑같길래

정안되면 css에서 해보려 하는데 감이 안잡히네요 ㅠ

염치없지만 고수님들에게 도움을 요청해봅니다...

그누보드5