觸發jQuery動畫必須雙擊的問題？

Question

我有這個動畫，點擊一個按鈕使div滑落，然後再次。顏色也改變。它按照我想要的方式工作，但是第一次點擊它時，它不起作用，您必須點擊兩次以獲得響應。使用...

event.preventDefault（）和

有人建議event.stopPropagation（）

...然而由於我不是與JS很大可能有人建議在那裏我會需要實現這個我現有的代碼來解決問題。

UPDATE *

道歉，因爲我用了我的代碼，這是在我的網站的獨立元素。

看到下面的小提琴...請注意你必須點擊/點擊兩次才能觸發它我只想點擊一次。

http://jsfiddle.net/8ZFMJ/46/

HTML

<div class="wrapper"> 

    <div class="content-wrapper"> 
     <div class="padLeft">     
<h2>Project Title</h2> 
<div class="crossRotate"> Open </div> 
</div>      
<div class="padLeft"> 
<p>Paragraph Goes Here</p> 
<h3>Play Video</h3> 
</div> 
</div>  

</div>  

CSS

.wrapper { 
width: 100%; 
height: 200px; 
position: absolute; 
overflow: hidden; 
margin: 0; 
padding:0; 
z-index: 1; 
} 

.content-wrapper { 
position: absolute; 
z-index: 999; 
background: red; 
bottom: -90px; 
width: 100%; 
-webkit-transition: bottom 1s; 
-moz-transition: bottom 1s; 
transition: bottom 1s;  
} 

.crossRotate { 
position: absolute; 
background-color: blue; 
z-index: 1; 
cursor: pointer; 
} 

JS

var clicked=true, animation=false; 
$(".crossRotate").on('click', function(){ 
if(clicked) 
{ 
    clicked=false; 
    $(".content-wrapper").css({"bottom": "-90px"}); 
} 
else 
{ 
    clicked=true; 
    $(".content-wrapper").css({"bottom": "0"}); 
} 
}); 

Answer 1

我希望我能正確理解你的問題。您正在使用點擊變量來確定元素是否先前已被點擊過。在頁面加載時，您將點擊變量設置爲true，因此客戶端將底部設置爲-90px。由於底部已經設置爲-90px，所以沒有任何事情發生。

我已經更新了的jsfiddle到點擊設置爲false，因爲這肯定是在頁面加載的情況下：http://jsfiddle.net/A8vG5/1/

var clicked=false; 
$(".crossRotate").on('click', function(){ 
    if(clicked) 
    { 
     clicked=false; 
     $(".content-wrapper").css({"bottom": "-90px"}); 
    } 
    else 
    { 
     clicked=true; 
     $(".content-wrapper").css({"bottom": "0"}); 
    } 
}); 

Answer 2

上雙擊的工作，請使用

$(".open-close").on('dblclick', function(){ 

代替

$(".open-close").on('click', function(){ 

注意：它僅適用於雙擊不是單一的點擊工作。

Answer 3

回答您的編輯

後，其工作，只要你想我的希望。

的jsfiddle JavaScript代碼

var clicked=true; 
$(".crossRotate").on('click', function(){ 
    if(!clicked) 
    { 
     clicked=true; 
     $(".content-wrapper").css({"bottom": "-90px"}); 
    } 
    else 
    { 
     clicked=false; 
     $(".content-wrapper").css({"bottom": "0"}); 
    } 
}); 

jsfiddle onClick Demo

老答案

對於雙擊

$(".open-close").on('dblclick', function(){ 

working Demo double click

對於點擊

$(".open-close").on('click', function(){ 

Answer 4

爲了避免重複點擊的錯誤，這是很好的禁用click事件，而動畫正在進行中。關於你第一次，如果你陷入困境，檢查：

var clicked=true, 

http://jsfiddle.net/8ZFMJ/43/

UPD：爲您更新的代碼：http://jsfiddle.net/8ZFMJ/54/

Answer 5

你剛剛在你的if/else語句錯誤的方式。把：

if(!clicked) 

和一切都很好。