Question

我正试图让div向上移动并在点击特定链接时淡出。我大部分时间都完成了它，但它看起来有点突然。 IE：div向上移动，但无论div方法的持续时间如何，它都会在fadeOut完成淡出之前停止向上移动。我的目标是让它在向上移动时逐渐消失，这样你就永远不会看到它移动到它的顶部，所以它看起来像是被刷掉了并逐渐消失。

以下是代码：

$( document ).ready(function() {

    $("#bannerText").fadeIn(2000);
    
    $(".showSites").click(function() {

      $('#bannerText').animate({
        'marginTop': "-=750px"}).fadeOut(0);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerText">
        <h1>Welcome</h1>
        <div class="subText">
          <span>There will be more here soon, I promise. For now, <a href="#" class="showSites">see what I've done so far.</a></span>
        </div>
      </div>

我可以将它发布到现场它会有所帮助，因为div位于屏幕中间，所以代码片段没有多大用处。

如果有的话，我该怎样做才能解决这个问题呢？

修改：here it is live，以便更好地了解它的外观。

Answer 1

您需要为css opacity : 0和.animate()回调函数

设置动画

$('#bannerText').animate({'opacity':0,'marginTop': "-=750px"} , 5000 , function(){
     $(this).fadeOut(0);
});

＆＃13;

$( document ).ready(function() {
  $("#bannerText").fadeIn(2000);
  $(".showSites").click(function() {
    $('#bannerText').animate({'opacity' : 0 , 'marginTop': "-=750px"} , 7000 , function(){
       $(this).fadeOut(0);
    });
   });
});

＆＃13;

#bannerText{
  margin-top: 100px;
  display : block;
  opacity : 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerText">
        <h1>Welcome</h1>
        <div class="subText">
          <span>There will be more here soon, I promise. For now, <a href="#" class="showSites">see what I've done so far.</a></span>
        </div>
      </div>

＆＃13;

平滑向上移动和淡出

1 个答案: