使用 jquery 从中心向左设置动画

Question

我有 3 个按钮位于一个容器的中央。当用户单击其中之一时，按钮应转到容器的左上角。其他按钮应该会消失。

我成功了，但是我不能让按钮从原来的位置开始动画，这是因为我在开始动画之前把按钮的位置改成了绝对的。

我认为正确的方法是从一开始就给按钮绝对位置，但我不知道是否可行（页面应该是响应式的）。

这是我的 HTML:

<body>
    <div id="inner_body" style="position:relative;margin: auto;text-align: center;width:50%;margin-top: 200px">
        <button class="bc" id="0" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton A</button>
        <button class="bc" id="1" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton B</button>
        <button class="bc" id="2" style="margin-top: 400px;margin-left:20px;margin-right:20px;padding: 20px;background-color: #718bf3">Botton C</button>
    </div>
</body>

和Jquery脚本：

$(document).on('click', '.bc', function() {
    $('#' + this.id + '').css({
        position: 'absolute'
    }).animate({
        left: 0,
        marginTop: 0
    }, "slow");
    for (var i = 0; i < 3; i = i + 1) {
        if (i != this.id) {
            $('#' + i + '').delay(1200).fadeOut(300);
        }
    }
});

Answer 1

使用 'position' 获取元素的初始位置并在开始动画之前重新使用它。

var x=$(this).position().left;
var y=$(this).position().top;
$(this).css({'position': 'absolute','top': y+'px','left': x+'px'})

Answer 2

我刚刚更新了处理 #inner_body 的自动高度（jsfiddle 也更新了）

HTML

<div id="inner_body">
    <button>Botton A</button>
    <button>Botton B</button>
    <button>Botton C</button>
</div>

CSS

#inner_body {
    position: relative;
    margin: auto;
    text-align: center;
    width: 50%;
    height: auto;
    border: 1px solid #000;
}

button {
    position: absolute;
    bottom: 0;
    padding: 20px;
    background-color: #718bf3;
}

button:nth-child(1) {
    left: 40px;
}

button:nth-child(2) {
    left: 170px;
}

button:nth-child(3) {
    left: 300px;
}

JS

$(document).on('click', 'button', function() {
    $(this).animate({
        left: 0,
        top: 0,
    }, "slow").css('bottom', 'auto');
    $(this).siblings().delay(1200).fadeOut(300);
});

jsfiddle

Answer 3

这是我对 css transition 属性的尝试 https://jsfiddle.net/abkow4zt/1/

$(document).on('click', '.bc', function () {
  
  $(this).css({'top': $(this).position().top + 'px','left': $(this).position().left + 'px'}); // set origin position
   $(this).addClass('onclick'); // add class with transition to clicked button
 
    setTimeout(function() {
      $('button.bc').each(function() {
        if(!$(this).hasClass('onclick')) $(this).fadeOut(300); // smoth hide other buttons
      }, 1200); // after 1200ms deylay
    });

});

#inner_body {
  position:relative;
  margin: auto;
  text-align: center;
  margin-top: 50px
  border: 1px solid grey;
}

button {
  margin-top: 400px;
  margin-left:20px;
  margin-right:20px;
  padding: 20px;
  background-color: #718bf3;
  transition: transform 1s, -webkit-transform 1s, -ms-transform 1s;
}

.onclick {
    position: absolute;
    -ms-transform: translate(-20px, -400px);
    -webkit-transform: translate(-20px, -400px);
    transform: translate(-20px, -400px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner_body">
  <button class="bc" id="0">Botton A</button>
  <button class="bc" id="1">Botton B</button>
  <button class="bc" id="2">Botton C</button>
</div>

使用 jquery 从中心向左设置动画

animate from the center to the left with jquery

css

jquery

jquery-animate