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

在编辑后回答

它正如你所希望的那样工作。

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 2

双击工作请使用

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

而不是

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

注意：它仅适用于双击而非单击。

Answer 3

为了避免多次点击的错误，最好在动画正在进行时禁用点击事件。关于你的第一次，你搞砸了;检查一下：

var clicked=true,

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

UPD：更新后的代码：http://jsfiddle.net/8ZFMJ/54/

Answer 4

你的if / else语句是错误的。放：

if(!clicked)

一切都很好。

Answer 5

我希望我能正确理解你的问题。您正在使用单击的变量来确定先前是否已单击该元素。在页面加载时，您将单击的变量设置为true，因此客户端将底部设置为-90px。由于底部已经设置为-90px，因此似乎没有任何事情发生。

我已将JSFiddle更新为设置为clicked为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"});
    }
});

触发jQuery动画时必须双击的问题？

5 个答案: