0

私はJquery animateを使用して、「ボタン」にカーソルを合わせたときに画像をポップアップさせてから、戻ってきます。カーソルがボタンの上を前後に移動したときに画像が上下にジャンプするのを防ぐために、停止機能を使用しようとしています。停止機能がうまく動作しないようです。アニメートの前にストップを配置すると (最初の .animate の前に配置し、それらすべてと最後の .animate の前に配置しても無駄になりました)、画像がまったくポップアップしないか、正しく表示されません。何が間違っているのかわかりません。

 $(document).ready(function(){
 $("#bearup").hover(function(){
 $("#shopbears").animate({top:['-=120px','swing']},2000).animate({top:'+=0px'},2000)
 .animate({top:'+=50px'},3200).animate({top:'+=70px'});
 });
 });

.animate 問題のフィドルを作成しました。http://jsfiddle.net/gerstley/dgWDy。おそらく、誰かが動きが重ならないようにする方法を見つけられるでしょう。

4

2 に答える 2

1

カーソルがホバーを引き起こし、次にホバーを解除し、ショップベアを移動するときに再びホバーするという問題が発生していないと仮定すると、これで問題が解決する可能性があります。

$(document).ready(function(){
 $("#bearup").hover(function(){
 $("#shopbears")
  .finish()
  .animate({top:['-=120px','swing']},2000)
  .delay(2000)
  .animate({top:'+=50px'},3200)
  .animate({top:'+=70px'});
 });
});
于 2013-07-16T18:19:48.427 に答える
0

さまざまなオプションを少しテストした後、一貫して機能すると思われる解決策を見つけました。stop() の代わりに finish() を使用することが答えですが、finish() には .delay() (または少なくとも delay() と animate() を一緒に) に問題があるようです。したがって、animate() を使用して遅延を作成するのが最適です。多くの人がこれを必要とするだろうとは想像できませんが、あなたは決して知りません.

$(document).ready(function(){
$("#button").mouseenter(function(){
$("#image") 
.finish().animate({top:['-=120px','swing']},2000)
.animate({top: '+=0px'},2000)
.animate({top:'+=50px'},3200)
.animate({top:'+=70px'})
;
});
});
于 2013-07-24T12:09:43.887 に答える