2012-05-22 2 views
2

내가 게시물에 표시 다음 해요 : jQuery fadeIn() different intervals with multiple div'sjQuery를 fadeIn() 간격으로 여러 사업부의

하지만 난 그냥 캔트 그것을 얻 ... 무슨 잘못을

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 


<script type="text/javascript"> 
$('.fadeIn').each(function(){ 
     var $this = $(this); 
     $this.before('<div>&nbsp;</div>'); 
     setTimeout(function(){ 
      $this.prev().remove(); 
      $this.fadeIn(Math.floor(Math.random()*1500)); 
     }, Math.floor(Math.random()*1500)); 
    } 
);​ 

</script>  

<style> 

.fadeIn{ 
    display: none; 
}​ 
​ 
</style> 

</head> 



<body> 

<div class="fadeIn">Test 1</div> 
<div class="fadeIn">Test 2</div> 
<div class="fadeIn">Test 3</div> 
<div class="fadeIn">Test 4</div> 
<div class="fadeIn">Test 5</div> 
<div class="fadeIn">Test 6</div>​ 
</body> 
</html> 
+2

jQuery 라이브러리를 포함해야합니다. – ManseUK

+1

DOM을 실행하기 전에'$ (function() {}) '문에 코드를 래핑해야합니다. – ManseUK

답변

2

demo in action

jQuery 라이브러리를 가져와야합니다! 당신의 <script> 전에
을 추가

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

그것과 같아야합니다

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script type="text/javascript"> 

(function($){ // remap the '$' character to jQuery 

$('.fadeIn').each(function(){ 
     var $this = $(this); 
     $this.before('<div>&nbsp;</div>'); 
     setTimeout(function(){ 
      $this.prev().remove(); 
      $this.fadeIn(Math.floor(Math.random()*1500)); 
     }, Math.floor(Math.random()*1500)); 
)}; 

})(jQuery); 


</script> 

또는 $(document).ready(function(){ /*your code here*/ });를 사용!

+0

감사합니다. 오류 메시지 .. – no0ne

+0

오류 메시지가 없지만 여전히 텍스트가 사라지고 있습니다. – no0ne

+0

@ThomasBLund이 예제를 다운로드합니다 (SAVE -> 다운로드 버튼 클릭). http://jsbin.com/adefez/edit#javascript, html, live 그리고보세요. –

1

1) 당신은 당신이 업데이 트 코드를 할 필요가 $(function() 또는 jQuery(function($)

jQuery(function($) { 
    $('.fadeIn').each(function(){ 
      var $this = $(this); 
      $this.before('<div>&nbsp;</div>'); 
      setTimeout(function(){ 
       $this.prev().remove(); 
       $this.fadeIn(Math.floor(Math.random()*1500)); 
      }, Math.floor(Math.random()*1500)); 
     } 
    );​ 
}); 
+0

또는'jQuery (function ($) {'jQuery를 나타 내기 위해'$ ($)''를 사용하십시오.) – andlrc

+0

@AndreasAL 감사합니다, 편집 됨 :) –

0

에 코드를 포장 할 필요가

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

2) jQuery 라이브러리를 포함해야합니다

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('.fadeIn').each(function() { 
     var $this = $(this); 
     $this.before('<div>&nbsp;</div>'); 
     setTimeout(function() { 
      $this.prev().remove(); 
      $this.fadeIn(Math.floor(Math.random() * 1500)); 
     }, Math.floor(Math.random() * 1500)); 
    });​ 
}) 
</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

페이지에 jQuery 라이브러리를 추가하면 jQuery 함수를 사용할 수 있습니다. 그리고 당신은

+0

감사합니다. 코드가 업데이트되었지만 여전히 시가가 없습니다. no0ne

+0

다음과 같이 스크립트 태그를 닫아야합니다. ''어떤 오류가 발생 했습니까? – ManseUK

+0

텍스트가 표시되지 않습니다. (페이드 인) 텍스트 – no0ne

0

See the docs here는 첫째 here이 코드가 작동와 바이올린입니다 있습니다 .. DOM이 준비 될 때까지 실행 나던 있도록

$(function() { 

}); 

블록에 코드를 포장해야합니다.

당신이하지 않은 것은 당신의 head 요소에 jquery 라이브러리를 가져 오는 것뿐입니다.