Question

我正试图向左滑动div然后消失。我正在使用此代码。

function slide_in(current_my)   {
$("#" + current_my).animate({
left: "510"
}, {
duration: 750
 });
  document.getElementById(current_my).style.display = "none"; 
}

如果我删除最后一行代码，div会在750ms左右向左滑动。但是当我添加最后一行时，div就会消失。

我累了补充道：

wait(750);

在最后一行之前，等待＆＃39;功能定义为：

function wait(ms)
{
var d = new Date();
var d2 = null;
do { d2 = new Date(); }
while(d2-d < ms);
}

但这只是让div坐在那里750毫秒然后消失了。再一次，我想要的是“当前_我”。 div滑动/动画然后然后消失（显示：无）。有任何想法吗？谢谢。

Answer 1

您需要使用jQuery animate的完整选项。此外，由于您已经拥有了该对象，因此再次找到它是没有意义的。在完整的方法中，您可以使用this关键字并将隐藏或任何其他动画直接应用于对象。

$("#" + current_my).animate({ left: "510" }, { duration: 750 }, function() {
   $(this).hide();
});

Answer 2

Animate完成后会进行回调。你可以

function slide_in(current_my)   {
    $("#" + current_my).animate({
         left: "510"
    }, {
         duration: 750
    }, function () {
         document.getElementById(current_my).style.display = "none"; 
    });
}

Answer 3

您应该在完整回调中隐藏div

function slide_in(current_my)   {
   $("#" + current_my).animate({
      left: "510"
    }, 750, function() {
      document.getElementById(current_my).style.display = "none"; 
    });

}

Doc reference

Answer 4

使用animate.css的替代方法，您需要调整css文件上的动画持续时间。

$(document).ready(function() {
	$('button.btn').click(function() {
  	$('div.box').addClass('animated fadeOutLeftBig');
  });
});

.box {
  width: 50px;
  height: 50px;
  margin-left: 200px;
  background-color: red;
}

.box p {
  text-align: center;
  font-size: 1em;
}

div.box {
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 0s;
  -moz-animation-duration: 5s;
  -moz-animation-delay: 0s;
  -ms-animation-duration: 5s;
  -ms-animation-delay: 0s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Test</p>
</div>
<button class="btn">Fade Left</button>

Answer 5

这比询问的要多一些，但让它变得有趣。抛出一个事件来触发动画而不是一个函数，传递位置和持续时间数字只是为了好玩：

＆＃13;

$(document).on('slidehide', '.myanimate', function(event, requstedduration, whereto, shouldhide) {
  var p = $(this).position();
  $(this).animate({
    left: whereto
  }, {
    duration: requstedduration,
    start: function() {$('.silly').toggle(shouldhide);},
    complete: function() {
      $(this).toggle(!shouldhide);
    }
  });
});

$('.myanimate').on('click', function() {
  console.log('moving');
  $(this).trigger('slidehide', [750, 510, true]);
});
// just so we can restart/see again
$(document).on('click', '.silly', function() {
  console.log('restart');
  $('.myanimate').show().trigger('slidehide', [750, 10, false]);;
});

＆＃13;

  .myanimate {
  position: absolute;
  left: 100px;
}

.silly {
  display: none;
  )

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myanimate">howdy there (click to trigger)</div>
<div class='silly'>Animation complete. (click to restart)</div>

＆＃13;

Div动画然后消失

5 个答案: