2015-01-16 2 views
-4
.newsUpdateComplited{ 
height: auto; 
background-color: #C5FFB2; 
border:1px solid black; 
margin-left:5px; 
margin-right:5px; 
margin-top:10px; 
border-radius: 5px; 
padding:3px; 
visibility:hidden; 

이것은 내 CSS입니다. 나는 이것을 보여주고 싶습니다. 몇 초 후에 그것을 보여주고 싶습니다. 하는 방법. 나는 약간의 튜토리얼을 찾고 있었지만 나는 좋은 것을 찾지 못했다. 누구든지 나를 도울 수 있습니까Jquery 메시지 표시 및 삭제

+2

JQuery는 어디에 있습니까? 질문에 코드를 포함시켜야합니다. –

+1

이것은 CSS입니다. jQuery와는 어떤 관계가 있습니까? – Devin

+0

나는 jquery로 만드는 법을 나에게 설명 할 누군가를 찾고있다. –

답변

0

그냥 타이머를 설정할 수 있습니다. 이것은 4 초가 될 것입니다.

$('.newsUpdatedComplited').show(); 
setTimeout($('.newsUpdatedComplited').hide(), 4000); 

당신은 가시성을 변경해야 할 수도 있습니다 : 숨겨진;표시 : 없음 대신.

0

기본 Javascript 기능 setTimeout을 사용하십시오. setTimeout에는 매개 변수가 필요합니다. 첫 번째는 함수이고 두 번째는 밀리 초 단위로 기다리는 시간입니다. 이것은 보여 3 초 동안 대기해야합니다 :

setTimeout(function(){ 
    $('.newsUpdateComplited').show(); 
}, 3000); 
또한 사용할 수 있습니다

jQuery의 fadein 부드러운 효과 : 또한

setTimeout(function(){ 
    $('.newsUpdateComplited').fadeIn(); 
}, 3000); 

, 당신은 실제 DOM 요소 .newsUpdateComplited 전에이 코드를 삽입하는 경우 jQuery의 DOM을 추가해야합니다.

$(document).ready(function(){ 
    setTimeout(function(){ 
     $('.newsUpdateComplited').fadeIn(); 
    }, 3000); 
}); 
0

이미 JQuery 응답과 Javascript 응답이 있습니다. 문제의 명확성이 부족하여 다양성을 위해 순수한 CSS 대안을 제안하고자했습니다.

@-webkit-keyframes animation { 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

을 다음 newsUpdate 요소에 추가 :

당신은 너무처럼 CSS의 키 프레임 애니메이션을 지정할 수

-webkit-animation-name: animation; 
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-delay: 2s; 
-webkit-animation-fill-mode: forwards; 

체크 아웃 this JSFiddle을!

면책 조항 :이 방법에 대한 지원은 끔찍합니다.

+0

괜찮 으면 좋겠지 만 디스플레이와 함께하고 싶습니다. none –

+0

애니메이션 요소의 높이를 변경하여 동일한 효과를 얻을 수 있습니다. [이것 좀 봐.] (http://jsfiddle.net/r4uptfrk/1/) –

관련 문제