Question

我正在尝试为我的家庭车库门开启器制作动画，我写道，以显示车库的开启和关闭。到目前为止，我已经想出如何在html / css中绘制我想要的东西（可能不正确）。现在我正在使用slideUp()，但它看起来并不那么棒。我真正想要的是它将边距滑动到0，然后将div滑动到0.这对我的一个矩形工作得体，但是如果我将它添加到其他矩形，它们都会同时运行，甚至如果我做了动画延迟..

到目前为止，这是我的jsfiddle。

$( "#hidebutton" ).click(function() {
  $('.panel').animate({'margin-top': '0'}, 1000);
  $('.panel').animate({'height': '0'}, 1000);
});

$( "#unhidebutton" ).click(function() {
  $('.panel').animate({'margin-top': '15px'}, 1000);
  $('.panel').animate({'height': '30px'}, 1000);
});

此外，我不知道如何制作它，所以我的按钮div不会向上滑动，但这对我来说并不重要..

Answer 1

你可以尝试这样的事情

var duration = 2000; // change as you like
$( "#hidebutton" ).click(function() { 
  var i = 0;
  var timer = setInterval(function(){
    if(i === $('.panel').length) clearInterval(timer);
    $('.panel:eq('+i+')').animate({'margin-top': '0'}, 1000).animate({'height': '0'}, 1000);
    i++;
    alert(i);
  } , duration);
});

$( "#unhidebutton" ).click(function() {
  var i = $('.panel').length;
  var timer = setInterval(function(){
    if(i === 0) clearInterval(timer);
    $('.panel:eq('+i+')').animate({'height': '30px'}, 1000).animate({'margin-top': '15px'}, 1000);
    i--;

  } , duration);
});

Working Demo

slideUp的替代方案，可以将div移动然后隐藏？

1 个答案: