Question

在我第一次点击工作时遇到麻烦。

如果第一个状态设置为true，则第一次单击不执行任何操作，第二个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，首先点击不动画

1 个答案:

DEMO