2

divリンクをクリックするとポップアップが表示されるようなものを作成しようとしています。しばらくすると、消えます。divからのアニメーションでクリックすると要素を表示できますanimation.css。しかし、私はそれを消すことはできません。コードは次のとおりです。

<!DOCTYPE HTML>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Clapper</title>


 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <link type="text/css" rel="stylesheet" href="animate.css" />
<script type="text/javascript">

function demoDisplay()
{
document.getElementById("clapper").style.display="block";
document.getElementById("clapperBG").style.display="block";
$("#clapper").fadeOut(200);

}



</script>

<!-- STYLES -->

<style>

 #clapper {
     min-width:200px;
     min-height:200px;
     top:40%;
     background-color:#888;
     left:40%;
     position:absolute;
     z-index:1002;
     display:none;

}

 #clapperBG {
     min-width:100%;
     min-height:100%;
     background-color:#555;
     opacity:0.6;
     position:absolute;
     display:none;
 }


 </style>

</head>

<body>

  <div id="wrapper">


     <div id="main">
     <a href="#" onclick="demoDisplay()" > TEST</a>
     <div id="clapper"  > Some Animation GIF</div>
     <div id="clapperBG" class="animated  flipInY" >Background</div>



     </div>

   </div>

  <footer>
  </footer>




</body>

</html>

何が悪いのか教えてください... や のような多くの例を試し$("#clapper").fadeOut(2000);ましdocument.readyたが、それでもうまくいきません。

4

5 に答える 5

3

フェードイン/フェードアウトしたい要素でfadeToggle()を使用し、タグで jQuery .click()イベントを使用してみてください:<a>

$("a").click(function() {
    $("#clapper").fadeToggle();
});

HTML を次のように変更します。

<div id="wrapper">
     <div id="main">
     <a href="#"> TEST</a>
     <div id="clapper"> Some Animation GIF</div>
     <div id="clapperBG" class="animated flipInY">Background</div>
</div>

ここに例を示します:例

于 2013-03-27T14:57:20.267 に答える
2

$.show()、$.delay() 、および $.hide() 関数をチェーンすると、あなたが求めていることを行うようです:

function demoDisplay()
{
  $("#clapper").show().delay(200).hide();
}
于 2013-03-27T14:59:52.840 に答える
0

要素のクリック後に特定のアクションをトリガーするおそらく最良の方法は、クリック ハンドルをその要素にアタッチすることです。functionの存在demoDisplayと次の HTML コードを考えてみましょう。

<div id="main">
    <a id="test-link" href="#">TEST</a>
    <div id="clapper">Some Animation GIF</div>
    <div id="clapperBG" class="animated  flipInY" >Background</div>
 </div>

イベント ハンドラーを含めるには、次のように jQuery を使用します。

$("#test-link").click(demoDisplay);

要素の 1 つをフェードアウトする前に最初に要素を表示したい場合は、既製の jQuery 関数を使用することをお勧めしますshow。

function demoDisplay() {
    $("#clapper, #clapperBG").show();
    $("#clapper").fadeOut(200);
}
于 2013-03-27T15:18:33.703 に答える
0

関数を使用してイベントをトリガーできclick()ます。

html:

<a href="#" class="triggerElem"> TEST</a>

JavaScript:

<script type="text/javascript">
    $(document).ready(function({

       $('.triggerElem').click(function() {
          $("#clapper, #clapperBG").show();//shows both element
          $("#clapper").fadeOut(200);
       });

    });
</script>
于 2013-03-27T14:54:50.650 に答える
0

簡単にできるのは、クリックに適用することです。ahref から onclick を削除してクラスを追加するか、ahref をまとめてダンプして div/span を実行してもかまいません。

 <div id="main">
 <a href="#" class="clickevent" > TEST</a>
 <div id="clapper"  > Some Animation GIF</div>
 <div id="clapperBG" class="animated  flipInY" >Background</div>



 </div>

jquery は次のようになります。

$(document).ready(function() {
   $('.clickevent').click(function(){
   $('#clapperBG').css({'display' : 'block'});
   });
  });

アニメーション化する場合は、.show(); を使用します。そして、スローを使用するか、.toggle(); を使用します。

于 2013-03-27T14:55:39.173 に答える