Question

我在这个div中有一个名为.falling的简单div包装器，我有10个小图像。我创建了一个简单的函数，允许它们在我想要的时候“向下滑动”。该代码如下。

JS ：

function slide(){
    $(".falling").delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow');}
slide();

CSS ：

.falling { 
  width: 500px;
  left: 600px;
  top: 60px;
  position: absolute;
  display:none;
}

问题是; 2件事。一，在“slide down”的末尾，我希望将.falling包装width降低到可能250px;，因为我想要幻觉图像是最后分组在一起。每个img都有一个名为.imgfall的共享类，我想用它来使图像底部的图像宽度变小。所以，也许max-width: 25px;

function slide(){
  $(".falling").delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow');
  $(".falling").css("width", "250px"); // tried this before and after slide but doesn't resize after slide but instead before, so not working!
}
slide();

Answer 1

通过将一个函数作为jquery动画函数中的最后一个参数调用，你基本上可以调用一个＆＃39; on complete＆＃39;。请参阅：http://api.jquery.com/animate/

    var $fallingShell = $(".falling");
    var animateSlides = function(){
      function slide(){
        $fallingShell.delay(100).fadeIn().animate({opacity: 1, top:"300px"},'slow', function(){
          $fallingShell.animate({"width":"250px"}, 500);
        });
      }
    }

重播需要js reset创建的内联css。请参阅：http://api.jquery.com/css/

我认为这是您需要重置的所有内容，但这是最好的猜测，没有看到代码。

var resetSlides = function(){
    $(".falling").css(
      "width":"auto",
      "opacity":"0",
      "top":"0px"
    );
}

那么你可以用click或计时器之类的东西将它们绑在一起，甚至可以在animateSlides();

的开头调用重置

$('button').on('click', function(){
  resetSlides();
  animateSlides();
});

当元素滑动时，使包装div宽度减小

1 个答案: