Question

我正在尝试弹出类似的内容，当我点击链接时会显示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，但仍然没有好处。

Answer 1

尝试在要使淡入/淡出的元素上使用fadeToggle()并在<a>标记上使用jQuery .click()事件：

$("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>

例如：example

Answer 2

链接$.show()，$.delay()和$ .hide（）函数似乎可以满足您的要求：

function demoDisplay()
{
  $("#clapper").show().delay(200).hide();
}

Answer 3

您可以使用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>

Answer 4

最简单的方法是将其应用于点击。从ahref中删除onclick并添加一个类甚至转储ahref alltogether并执行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（）;

Answer 5

在元素单击后触发特定操作的最佳方法可能是将单击手柄附加到该元素。考虑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);
}

jQuery fadeIn和fadeOut函数不适用于元素单击

5 个答案: