자바스크립트 질문드립니다.
본문
안녕하세요
공지사항 최신글을 슬라이드 업해서 사용하고 있습니다.
1.25초 마다 글이 올라가면서 움직이는건데요..
너무 딱딱해 보여서 움직일때마다 애니메이션을 주고 싶습니다.
(opacity 0.5 였다가 1 로 바뀌는 형식 같은거..)
소스는 아래와 같습니다
<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에서 해보려 하는데 감이 안잡히네요 ㅠ
염치없지만 고수님들에게 도움을 요청해봅니다...
답변을 작성하시기 전에 로그인 해주세요.
