动画从中心向左与jquery

我有3个按钮居中在一个容器。当用户点击其中一个按钮应该去容器的左上角。其他按钮应该消失。动画从中心向左与jquery

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

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

这里是我的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); 
     } 
    } 
});

来源

2016-09-20 Andy

的'inner_body'有固定'height'？ –

不可以。内体高度是动态的。单击按钮后将填充更多文字。 – Andy

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

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

来源

2016-09-20 06:13:06

确定它的工作原理 - 首先我为所有3个按钮设置它，然后激活动画！ – Andy

我刚刚更新处理#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; 
}

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

jsfiddle

来源

2016-09-20 06:17:56

这是我用CSS transition财产尝试 https://jsfiddle.net/abkow4zt/1/

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

 
}); \t

#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>

来源

2016-09-20 06:19:41 Sojtin

动画从中心向左与jquery

回答

相关问题