0

这是我的标记

<div class="container">
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="eachFloor">
    <input type="checkbox" />
    <div class="floor"></div>
  </div>
  <div class="elevator"></div>
</div>

这是我的CSS

.container
{
width: 500px;
margin-left: 100px;
position:relative;
}

.floor
{
width: 400px;
background: #eee;
border-bottom: 1px solid black;
height: 110px;
}

.elevator
{
background: #000;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
width: 360px;
height: 75px;
}

input[type="checkbox"]
{
float:right;
margin-left: 100px;
margin-top: 50px;
}

所以如上所示，当我单击其中一个复选框时，我有一系列复选框，我应该设置动画（动画：顶部属性），并且 div.elevator 应该转到复选框所在的楼层，当我单击其中一个复选框时在动画运行时，我应该能够检查电梯是否已经通过当前楼层，如果它没有通过当前楼层，我应该在该特定楼层停止电梯大约一两秒钟，然后继续之前的动画。

假设电梯在五楼（底层），假设我点击 1 楼，然后当动画运行时，我点击 3 楼，如果电梯没有通过 3 楼（假设它在4 楼，当我单击复选框时）我应该能够在三楼停止动画：顶部大约一两秒钟，然后继续上一个动画到一楼（从三楼到电梯的当前位置）。

如果我像这样发出动画调用

$(".container").on("click", "input:checkbox", function (event) {
  $(".elevator").animate({
    top: $(this).parent().offset().top
  }, {
    duration: 6000
  });
});

那么到 3 楼的动画只会在它到达一楼后才会发生，所以它不会在中间停止（原因是动画在元素上排队）。但是重点来了，如果我正确地维护 fx 队列，就像单击 1 层复选框时我有动画：从顶部到 1 层然后单击 3 层时，我需要以某种方式神奇地移动级别3楼动画首先在队列中（如果楼层没有通过，然后将电梯停在那里大约一两秒），然后从3楼运行1楼动画。

我如何在 jquery 队列、clearQueue 和其他 jquery 方法中执行此操作？如果我也需要使用插件来暂停/恢复我的动画，我很好....任何帮助将不胜感激！

4

1 回答 1

0

这就是你需要的

$(function(){
     $(".container").on("click","input:checkbox",function(event){
         var pos = $(this).next().position().top;
         var elPos =  $(".elevator").position().top;
         $(".elevator").animate({marginTop: pos-elPos },6000);
    });
});

http://jsfiddle.net/vadXa/

于 2013-02-09T09:37:22.880 回答