javascript - 如何修复双击 jQuery 上/下滑动动画？

Question

我有这样的动画，单击按钮会使 div 向上滑动，然后再次向下滑动。它按照我想要的方式工作，但是当你第一次点击它时，它不起作用，你必须点击两次才能让它响应。

有人建议使用……

event.preventDefault() 和 event.stopPropagation()

...然而，由于我对 js 不是很好，有人可以建议我需要在现有代码中的什么地方实现它来解决问题。

请看下面的 fiddle ……注意你必须点击/点击两次才能触发它，我只想点击一次。

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

只改变clicked的初始值

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

演示:Fiddle

您已经通过 css 将 bottom 的值设置为 -90，并将 clicked 设置为 true，因此当第一次点击发生时，将执行 if block 而不是 else block

---

你或许可以将它减少到

var $wrapper = $(".content-wrapper");
$(".crossRotate").on('click', function () {
    $wrapper.css('bottom', function (i, bottom) {
        return parseInt(bottom) ? 0 : -90;
    });
});

演示:Fiddle