Question

道歉，如果这看似简单，但我似乎无法让它发挥作用。

我想有一个div，在div中，文本淡入，向上滑动并在一个动作中淡出。到目前为止，我可以让文本淡入并在一个动作中向上滑动，但是，在幻灯片淡出动画之前，文本会暂停。

$(document).ready(function () {
    $("button").click(function(){
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
    $('#theDIV').css({'display':'block','opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500);
    });
 });

 #theDIV{display:none; position:relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>

Answer 1

使用transform而不是top style：

    $('#theDIV').css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','transform':'translateY(-50px)'}, 1500);
    $('#theDIV').css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','transform':'translateY(-50px)'}, 1500);

Answer 2

$(document).ready(function () {
    $("button").click(function(){
$('#theDIV').css({'display':'none','top':'50px'});
 $('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
setTimeout(function(){  $('#theDIV').css({'opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500); }, 1500);
    });
 });

#theDIV{display:none; position:relative;margin:30px 150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>

Answer 3

您收到的所有答案似乎都运行得很好，除了他们使用Javascript来运行动画（以及top属性）这些都是像您这样的微交互的不良做法。

我使用Javascript与CSS为您链接了very good articles关于动画的{3}} 保罗·爱尔兰的第二个Why Moving Elements With Translate() Is Better Than Pos:abs Top/left。

此处仅使用toggle class＆amp; Keyframes来运行动画。

＆＃13;

$(document).ready(function () {
  $("button").click(function(){
    $('.show-up-and-fade').toggleClass('animate');
  });
});

＆＃13;

.show-up-and-fade {
  opacity: 0;
  transform: translateY(30px);
}

.show-up-and-fade.animate {
  animation: show-up-and-fade 2s forwards;
}

@keyframes show-up-and-fade {
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateY(-30px);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Start Animation</button>

<div class="show-up-and-fade">animated text</div>

＆＃13;

希望它会对你有所帮助！

文本同时淡入，淡出和淡出

3 个答案: