2

コード

function wkHover(){
$('.worksItem').hover(function() {
        $(this).animate({ top: '-10px' }, 300, 'swing', {queue: false});
        $('.worksItem').not(this).animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
    }, function(){
        $(this).animate({ top: '0' }, 200, 'swing', {queue: false});
        $('.worksItem').animate({ opacity: '1' }, 200, 'swing', {queue: false});
    });
}

http://egegorgulu.com/works

http://jsfiddle.net/vJQEQ/17/

わかったので、2つの問題があります。

  1. アイテム間をホバリングすると、マージンを超えたときにマウスアウト機能が自然にトリガーされ、この不快な派手な効果が作成されます。私がやりたいのは、ホバーアウトされているものとホバーされているものをアニメートして、残りが同じままになるようにすることです。何か案は？

  2. すべての要素の周りでマウスをすばやく動かしてみてください。てんかん発作を起こさないようにしてください。とにかくこれを防ぐために？

4

2 に答える 2

2

これが実用的なフィドルです。重要なのは.stop()、新しいアニメーションをキューに追加する前のアニメーションです。

$(this).stop(true, true).animate(/***/);

でも; 複数のアニメーションを同時に実行する必要があるため、これにより問題が発生します。そのため、呼び出す.stop()と間違ったアニメーションが妨げられます。したがって、さまざまなアニメーションをさまざまなアニメーションに配置する必要がありますqueues。

$(this).stop('jump', true, true).animate({/***/}, {
  queue: 'jump'
});

fxデフォルト（ ）とは異なるキューを使用する場合は、.dequeue()手動で使用する必要があります。

$(this).stop('jump', true, true).animate({/***/}, {
  queue: 'jump'
})
.dequeue('jump');

.delay()[編集]最初の問題については、カーソルを次のブロックに移動する時間を与えるために、フェードアウトアニメーションが最善の解決策だと思います。これが含まれているフィドルです：

$(this).stop('fade', true).delay(300, 'fade').animate({ //***

これにはいくつかの欠点があります。これは主に、.stop()によって設定されたタイムアウトをキャンセルしないため.delay()です。私の最善の解決策は、最初のフィドルからの「フラッシュ効果」、または2番目のフィドルからの遅延フェードイン効果のいずれかを選択することです。

于 2012-01-25T17:29:41.770 に答える
1

stop2つの引数を渡すメソッドを使用してみてくださいstop(false, true)。最初の引数はキューをクリアするかどうかで、2番目の引数は現在のアニメーションの最後にジャンプします。これを試して。

$('.worksItem').hover(function() {
    $(this).stop(false, true)
    .animate({ top: '-10px' }, 300, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
}, function(){
    $(this).stop(false, true)
    .animate({ top: '0' }, 200, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '1' }, 200, 'swing', {queue: false});
});
于 2012-01-25T16:49:45.663 に答える