Jqueryエフェクトが機能しない

私は.div2をクリックしても何も起こりません。それを理解できません。おそらく非常に単純なものでしょう。私が持っている唯一のCSSは、divの幅を設定します。他に何もない。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>JQ Effects</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="JQ_animation.css" /> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".div2").click(function() { 
        $(".div2").slideDown(3000); 

       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <div class="div1"> 
      <div class="div2">Menu</div> 
     </div> 
    </body> 

</html>

出典

2017-03-22 JCass5080

div2をクリックするとdiv2が下にスライドしています（すでに表示されています）。私はそれを理解していない。 'JQ_animation.css'の内容を投稿したいかもしれません – j08691

' slideDown'は隠し要素を可視にする方法です。それは何を期待していますか？ –

ああ。そこにそれがある。申し訳ありませんが、初心者の間違い。ありがとう。 @ j08691あなたも。 – JCass5080

あなたは同じdiv 2時間を呼び出しました。あなたがスライドを表示することを望んでいると仮定します。 CSSでなし：ここit.You独自にそれを変更することができます行う方法の例、

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#flip").click(function(){ 
    $("#panel").slideDown("slow"); 
}); 
}); 
</script> 
<style> 
#panel, #flip { 
padding: 5px; 
text-align: center; 
background-color: #e5eecc; 
border: solid 1px #c3c3c3; 
} 

#panel { 
padding: 50px; 
display: none; 
} 
</style> 
</head> 
<body> 

<div id="flip">Click to slide down panel</div> 
<div id="panel">Hello world!</div> 

</body>

出典

2017-03-22 17:30:17

slideDown（）はjQueryのメソッドと表示して隠された要素上で動作しています。

ここでは、とにかく.div2を隠しておらず、非表示にしてスライドさせようとしています。このようなものを試してみてください。メニューを最初に押したときには、隠れて、同じ場所を押してみてください。

これはdivをスラッシュダウンさせるための良い方法ではありません。代わりに、ボタンを作成して、ボタンではなくonclick関数を実行させます。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>JQ Effects</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="JQ_animation.css" /> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".div2").click(function() { 
        $(".div2").slideUp(3000); 

       }); 
     $(".div2").click(function() { 
        $(".div2").slideDown(3000); 

       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <div class="div1"> 
      <div class="div2">Menu</div> 
     </div> 
    </body> 

</html>

出典

2017-03-22 17:41:59

Jqueryエフェクトが機能しない

答えて

関連する問題