jQuery fadeIn和fadeOut函数不能在单击元素上工作

我试图让一个弹出式的东西，当我点击一个链接时出现一个div。过了一段时间，它消失了。我可以在点击时显示div元素，并从获得一些动画。但我无法让它消失。下面是代码：jQuery fadeIn和fadeOut函数不能在单击元素上工作

<!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但仍然没有很好的例子很多。

来源

2013-03-27 dil33pm

你试过没有这一行：'的document.getElementById（“梆子”） .style.display = “块”;'？ – 97ldave 2013-03-27 14:50:58

@ 97ldave调用'.fadeOut（）'如果元素不可见，则不会执行任何操作。 – 2013-03-27 14:52:21

好点，请参阅下面的答案。 – 97ldave 2013-03-27 14:57:36

您可以使用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-27 14:54:50

你不需要把.fadeOut里面的一个函数分开.show ??? – Cam 2013-03-27 14:58:03

最简单的事情做的是将其应用到一个点击。从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-27 14:55:39 Cam

大声笑，我比你快50秒（; – 2013-03-27 14:56:19

时间，但我们燃烧的火... – Cam 2013-03-27 14:58:25

非常感谢！你们所有！:) – dil33pm 2013-03-27 15:11:31

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

更改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

来源

2013-03-27 14:57:20 97ldave

链接$.show(),$.delay()和$ .hide（）f unctions似乎做什么你问：

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

来源

2013-03-27 14:59:52 cmallard

可能触发某个动作的最佳方式后点击元素是点击手柄连接到该元素。考虑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-27 15:18:33

锚标记'a'不支持'onclick '事件属性... – Aequanox 2013-03-27 15:36:04

哦，当然，@Aequanox。你是对的。 – 2013-03-27 17:25:02

jQuery fadeIn和fadeOut函数不能在单击元素上工作

回答

相关问题