javascript - 我必须点击两次才能触发 JQuery 点击功能

Question

这是 Fiddle .我有个问题;看起来几乎是随机的。每当我单击一个 div 来触发动画时，我必须单击两次才能触发动画。顺便提一下，由于某种原因，动画不起作用，所以假设需要两次点击才能为每个 div 设置动画；这是我不想要的。

HTML

<footer>
    <one id="one">
        <p unselectable="on"></p>
    </one>
    <two id="two">
        <p unselectable="on"></p>
    </two>
    <three-info>
    </three-info>
    <three id="three">
        <p unselectable="on"></p>
    </three>
</footer>

JavaScript

$(document).ready(function () {
    $('#three').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 800, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
    $('#two').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 700, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
    $('#one').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 700, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
});

CSS

footer {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    height: 115px;
    background-color: #4a4a4a;
    overflow: visible !important;
    -webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
one {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: pink;
    height: 115px;
    margin-left: 0px;
    display: block;
}
one,two,three {
    text-align: center;
    color: white;
    font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 115px;
}
one:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out; 
    cursor: pointer;
}
two:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
three:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
two {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: gray;
    height: 115px;
    margin-left: 0px;
    display: block;
}
three {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: black;
    height: 115px;
    margin-left: 0px;
    display: block;
}

Answer 1

您的代码要求您点击两次，因为在第一次点击时您的 clicks 数据尚未设置，因此您的 if 语句的 else 子句首先发生

//"clicks" will be undefined the first time through
var clicks = $(this).data('clicks'); 
if (clicks) {
   $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
} else {
   //so this part gets executed first
   $("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
}

您可以设置一个 data-* 属性或使用 .data() 来设置它

$("#three").data('clicks',true);
$("#two").data('clicks',true);
$("#one").data('clicks',true);

或者

<three id="three" data-clicks="1">

Fiddle