Jquery动画和when函数

Question

当我使用脚本时

$(document).ready(function(){
    console.log("it started");
    swapsies();
});

function swapsies() {

    $('.lang').on('click', function(){
        console.log("here");
        //.when(

        $.when(
          $(this).animate({ "margin-left": "-=10" }, 500),
          $('.active').animate({ "margin-left": "+=10" }, 500)
        ).done(function(){
            console.log("done");
        });
    });    
}

两个元素，这个和活动元素应该移动和交换位置，但只有活动元素在移动！我不知道，也许是因为等待功能这是我的 html 所以你可以运行这个：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js" ></script>
    <title>Test swapsies</title>
</head>
<body>
    <div id="fied">
        <button type="button" id="bb">Click Me!</button>
        <div id="swapthis">
            <ul>
                <li class="active lang"><a href="#">En</a></li>
                <li class="lang"><a href="#">Fr</a></li>
                <li class="lang"><a href="#">Es</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

和css：

li{
    display:inline;
    background-color: aquamarine;
    font-size: 24px;
}

.active{
    background-color: blanchedalmond;
}

请帮我弄清楚如何让这两个元素都移动 - 单击的那个和使用 .active 的那个 class。

Answer 1

你应该让你点击的元素更向左移动。而不是“-=10”

$(this).animate({ "margin-left": "-=10" }, 500)

使用“-=20”

$(this).animate({ "margin-left": "-=20" }, 500)

我已经在 jsfiddle 上测试了你的代码。您单击的元素没有移动这一事实表明代码正在运行。

因为你要求它左边的元素向右移动 10 像素（这使得它自己向右移动 10 像素）然后要求元素向左移动 10 像素，所以它根本不动。

但由于您可能不希望其右侧的元素也移动，因此您还应该处理这些元素的边距

我已经像这样修改了你的代码：

$('.lang').on('click', function(){
    var dist = 10;
    console.log("here");
    //.when(
    $.when(
      $(this).animate({ "margin-left": "-="+dist*2 }, 500),
      $(this).next().animate({ "margin-left": "+="+dist }, 500),
      $('.active').animate({ "margin-left": "+="+dist }, 500)
    ).done(function(){
        console.log("done");
    });

});

如果你想移动更多，请增加距离。

Answer 2

$(document).ready(function() {
    console.log("it started");
    swapsies();
});

function swapsies() {
    $(".lang").on("click", function(e) {
        $(e.target)
        .parent()
        .siblings()
        .removeClass("active")
        .animate({"left":"0"}, -500)
        .end()
        .addClass("active")
        .animate({"margin-left": "-=10", "left":"0px"}, 500, function() {
            $(this).prependTo($(this).parent())
            .animate({"margin-left": "+=10", "left":"-=10"}, 500, function() {
              $(this).siblings().animate({"left": "0"}, 500)
              .promise().then(function() {
                console.log("done")
              })
            })
        });
    });
}

li {
  position: relative;
  display: inline;
  background-color: aquamarine;
  font-size: 24px;
  padding: calc(0%);
  margin-left: calc(0%);
  margin-right: calc(0%);
  width: calc(1%);
}
.active {
  background-color: blanchedalmond;
  left:-10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="fied">
  <button type="button" id="bb">Click Me!</button>
  <div id="swapthis">
    <ul>
      <li class="active lang"><a href="#">En</a>
      </li>
      <li class="lang"><a href="#">Fr</a>
      </li>
      <li class="lang"><a href="#">Es</a>
      </li>
    </ul>
  </div>
</div>

Jquery动画和when函数

Jquery animation and when function

javascript

jquery

animation