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函數不能在單擊元素上工作

回答

相關問題