動畫從中心向左與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

回答

相關問題