时间戳

首页 > 解决方案 > 按下按钮时动画跨度

jquery - 按下按钮时动画跨度

问题描述

我正在尝试创建一个网络投资组合，我希望登录页面上的两个按钮在按下其中一个按钮为文本腾出空间时向上移动。由于某种原因，按钮不会随着我当前的设置移动。有任何想法吗？这是我的相关代码：

javascript

$(document).ready(function(){
$('button').click(function(){
    $('#Name').addClass("animated fadeOutUp")
    $('#options').addClass("slideUp")})})

html

<div class = "content animated fadeInUp">
                <h1 id="Name">TOM KAIZER</h1>
                <p></p>
                <span id = "options">
                        <button type = "button" class = "button grow"class = 'resume' style = "text-decoration: none; color: black;">Resume</button>
                        <button type = "button" class = "button grow contact" style = "text-decoration: none; color: black;">Contact Me</button>
                </span>
        </div>

CSS

@keyframes slideUp{
        from{
            opacity: 0;
        }
        to{
            opacity:1;
            transform: translateY(-20px);
        }
    };
    @-webkit-keyframes slideUp{
        from { top: 0; left: 0; }
        to   { top: 100px; left: 100px; }
    };

    .slideUp{
        animation-name:slideUp;
        -webkit-animation-name:slideUp;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-fill-mode: forwards
    }

标签： jqueryhtmlcss

解决方案

这是一个位置问题。只需将@keyframes 放在 .slideUp 之后，它就会起作用。要使按钮真正移动，您需要设置 CSS 显示属性。

.slideUp{
        position: absolute;
        animation-name:slideUp;
        -webkit-animation-name:slideUp;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
        animation-fill-mode: forwards;
}

@keyframes slideUp{
        from{
            opacity: 0;
        }
        to{
            opacity:1;
            transform: translateY(-20px);
        }
    };
    @-webkit-keyframes slideUp{
        from { top: 0; left: 0; }
        to   { top: 100px; left: 100px; }
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "content animated fadeInUp">
                <h1 id="Name">TOM KAIZER</h1>
                <p></p>
                <span id = "options">
                        <button type = "button" class = "button grow"class = 'resume' style = "text-decoration: none; color: black;">Resume</button>
                        <button type = "button" class = "button grow contact" style = "text-decoration: none; color: black;">Contact Me</button>
                </span>
        </div>
<script>
$(document).ready(function(){
$('button').click(function(e){
  $('#Name').addClass("animated fadeOutUp");
  $('#options').addClass("slideUp");
  });
});

</script>

推荐阅读