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

简单的做法是将其应用于点击。从 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 回答
0

在元素点击后触发某个动作的最佳方式可能是在该元素上附加一个点击句柄。考虑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);

如果您想在淡出其中一个之前先显示您的元素，最好使用现成的 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 回答