2

いくつかの画像が掲載されたページがあります。ユーザーがいずれかの画像にカーソルを合わせると、50％不透明なオーバーレイdivをフェードインして、カーソルを合わせた画像に関する情報を表示したいと思います。これが私が今PHPに持っているコードです（読みやすくするために文字列concatsなどを削除しました）：

<div class="propertyoverlay"
    id="boxnum'.$propertynumber.'"
    onMouseOver="fadein(\'boxnum'.$propertynumber.'\')"
    onMouseOut="fadeout(\'boxnum'.$propertynumber.'\')"
>';
    <h3 class="price">'.$properties[$propertynumber]['price'].'</h3>';
</div>';

これは、divIDを次のコマンドにフィードします。

function fadein(id){        
    $('#'+id).animate({ 'opacity': 0.5 });
}

function fadeout(id){        
    $('#'+id).animate({ 'opacity': 0 });
}

私が抱えている問題は次のとおりです。A。ユーザーが画像のオンとオフを繰り返してすばやくホバーすると、フェードコマンドが積み重なっていきます。mouseOverコマンドとmouseOutコマンドが呼び出されるとすぐに、残りのキューを上書きしたほうがよいでしょう。B.親の内部にネストされたH3タグにカーソルを合わせると、mouseOutが直接呼び出され、続いてマウスオーバーコマンドが呼び出され、divがフェードアウトしてから、すぐに再びフェードインします。

これを解決するためにJavascriptまたはJQueryを使用できてうれしいですが、可能であれば、当面はCSS3ベースのソリューションを避けたいと思います。お時間をいただき、誠にありがとうございます。

4

3 に答える 3

1

要素に対して新しい.animate操作を開始する前に、関数を呼び出して、.stop() まだ進行中のアニメーションを停止します。

このように、フェードイン操作が完了する前にフェードアウト関数が呼び出されると、すでに到達した不透明度の値から0.0の不透明度にフェードアウトします。

于 2013-01-22T10:10:37.453 に答える
1

A：animateを呼び出す前に、jQuery .stop（）メソッドを使用してください。例：

$('#'+id).stop(true).animate({ 'opacity': 0 });

B：jQuery（docsmouseenter ）でandイベントを使用してみてください。これにより、子要素がマウスオーバー/マウスアウトをトリガーする問題が修正されます。つまり、イベントをjQueryでバインドする必要がありますが、HTML要素に直接バインドする必要はありません。mouseleave

于 2013-01-22T10:12:14.533 に答える
0

私はまだこれをテストしていませんが、.stop()あなたが必要としているものだと思います！詳細については、公式のAPIドキュメントをご覧ください。

于 2013-01-22T10:10:43.400 に答える