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

Answer 2

问题是，首次点击该元素时，child属性的值为data-clicks。您可以通过添加undefined在HTML中设置此值，也可以将Javascript中的值设置为

data-clicks="true"

我还优化了您的代码以使其干燥。

Demo

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

$(document).ready(function() {

  // To animate the other elements than the clicked one
  function animateOthers(clickedElement, otherElement) {
    otherElement.animate({
      marginLeft: 0 + 'px'
    }, 100, 'linear');
    clickedElement.animate({
      marginLeft: $(window).width() - 900 + 'px'
    }, 745, 'linear');
  }

  // To animate the element that is clicked
  function animate(clicks, first, otherElements) {
    var leftMargin = ($(window).width() - 900) + 'px';

    var left = '0px',
      duration = 800;

    if (clicks) {
      // Update the marginLeft and duration to animate
      left = leftMargin;
      duration = 745;
    }

    // Animate the clicked element
    first.animate({
      marginLeft: left
    }, duration, 'linear');

    // For other elements
    otherElements.forEach(function(v) {
      if ($('#' + v).css('marginLeft') == leftMargin) {
        animateOthers(first, $('#' + v));
      }
    });

    // Update the data-clicks value by negating it
    first.data("clicks", !clicks);
  }

  // Array of all the elements
  var elements = ['one', 'two', 'three'];

  // Bind click event on the elements on the array
  $('#' + elements.join(',#')).on('click', function() {
    var clicks = $(this).data('clicks');

    var clickedElement = $(this).attr('id'),
      otherElements = elements.slice();
    otherElements.splice(elements.indexOf(clickedElement), 1);
    // otherElements is the array of the elements other than the clicked

    animate(clicks, $(this), otherElements);
  });
});

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;
}

我必须单击两次才能启动JQuery点击功能

2 个答案: