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;
}

上に示すように、一連のチェックボックスがあり、そのうちの1つをクリックするとアニメーション化する必要があり（アニメーション：トッププロパティ）、div.elevatorはチェックボックスが配置されているフロアに移動し、チェックボックスの1つをクリックするとアニメーションの実行中に、エレベーターが現在のフロアを通過したかどうかを確認できるはずです。現在のフロアを通過していない場合は、その特定のフロアでエレベーターを約 1 ～ 2 秒間停止してから、前のアニメーション。

エレベーターが 5 階 (下) にあると仮定して、1 階をクリックし、アニメーションの実行中に 3 階をクリックし、エレベーターが 3 階を通過していない場合 (チェックボックスをクリックしたときのレベル 4 フロア) アニメーション :top を 3 階で約 1 ～ 2 秒間停止してから、1 階への前のアニメーションを続行できるはずです (3 階からエレベーターの現在の位置) .

このようにアニメーションコールを配置すると

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

その後、レベル 3 フロアへのアニメーションは 1 階に到達した後にのみ発生するため、途中で停止することはありません (要素のアニメーションがキューに入れられているため)。しかし、レベル1フロアのチェックボックスがクリックされたときのようにfxキューを適切に維持すれば、それを行うことができます:トップからレベル1フロアまで、そしてレベル3がクリックされたときに、何らかの方法で魔法のようにレベルを移動する必要があります最初に 3 階のアニメーションをキューに入れ (階が通過していない場合は、そこでエレベータを約 1 ～ 2 秒間停止させます)、次にレベル 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 に答える