jquery slideIn元素不起作用

-1

我似乎無法得到方法工作中的jQuery幻燈片。jquery slideIn元素不起作用

請看看我的代碼如下。其他的jquery方法工作正常。

HTML：

<div id="customers-say"> 
       <h1>WHAT OUR CUSTOMERS SAY...</h1> 

      </div>

JQUERY：

$(document).ready(function(){ 

      $("#customers-say").slideDown("slow"); 

      $("#f1").fadeIn(1000, function(){ 
       $("#f2").fadeIn(1000, function(){ 
        $("#f3").fadeIn(1000, function(){ 
         $("#f4").fadeIn(1000); 
        }) 
       }) 
      }); 


     });

來源

2017-08-16 CoderAz

不能了slideDown事件適用於已經可見它必須首先隱藏的元素，了slideDown會慢慢取消隱藏它。

在您的例子簡單的將此CSS的元素

#customers-say { 
      background: #de9a44; 
      margin: 3px; 
      display: none; 
      float: left; 
     }

來源

2017-08-16 18:06:06

啊，非常感謝你Zaigham！我是網絡開發和Jquery的新手，所以我正在犯這樣的愚蠢錯誤，但肯定會從他們那裏學習。 – CoderAz

不客氣......你也可以投我的答案 –

的HTML被動畫之前顯示。我添加了內聯樣式來隱藏所有元素。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

      $("#customers-say").slideDown("slow"); 

      $("#f1").fadeIn(1000, function(){ 
       $("#f2").fadeIn(1000, function(){ 
        $("#f3").fadeIn(1000, function(){ 
         $("#f4").fadeIn(1000); 
        }) 
       }) 
      }); 


     }); 
</script> 
</head> 
<body> 

<div style="display:none;" id="customers-say"> 
       <h1>WHAT OUR CUSTOMERS SAY...</h1> 

      </div> 

      <h2 style="display:none;" id="f1">A. Dylan</h2> 
      <h2 style="display:none;" id="f2">B. Dylan</h2> 
      <h2 style="display:none;" id="f3">C. Dylan</h2> 
      <h2 style="display:none;" id="f4">D. because I spit hot fire</h2> 
</body> 
</html>

來源

2017-08-16 18:05:33 mfortes

jquery slideIn元素不起作用

回答

相關問題