Javascript，第一次点击不是动画

Question

在第一次点击时遇到了一些问题。

这是一个fiddle

如果第一个状态设置为真，第一次点击什么都不做，第二个 clik 带来隐藏 div。然后它会在下次点击时正常工作。
如果我将第一个状态设置为 false，div 将在第一次点击时突然出现，忽略 css 动画规则。下次点击将正常工作。

我错过了什么？

Answer 1

您 right css 属性的初始设置应该是 -5%。另外，您使用的标志最初应该是 false。

CSS:

.floatbox{
    position:relative;
    width:40%;
    right:-5%;  /* you need to set it initially */
    .
    .

JS:

states = [ false ];

$(document).ready(function() {
    $(".wrap").click(function() {
        var _id=$(this).attr('data-id');
        if (states[_id] == true){
            $(".floatbox")[_id].style.cssText="right:-5%;";
            states[_id]=false;
        }
        else {
            var _id=$(this).attr('data-id');
            $(".floatbox")[_id].style.cssText="right:20%;";
            states[_id] = true;
        }
    });
});

Javascript，第一次点击不是动画

Javascript, first click not animated

html

css

jquery

animation

click

DEMO