0

私が書いた次の関数がありますが、部分的に機能しています。ホバーアニメーションでのマウス入力は機能しませんが、マウス離脱アニメーションは機能します。ドキュメントからわかる限り、正しく書かれていますが、何が問題なのかわかりません。何か案は？:)

function hoveranim (){

        $(this).hover(function() {

             $(this).animate({left: '+=260px'}, '6000');

        },

        function() {

            $(this).animate({left: '-=260px'}, '6000');

             }
         )};

        $('div#feedback-form-container').on('hover', hoveranim);
4

1 に答える 1

2

hoverイベントで関数を呼び出しています。つまり、hoveranim()関数が有効になると、イベントはすでに通過しています。つまり、mouseoutは機能しhoverますが、機能しません。

jQueryを拡張する関数に書き直すことをお勧めします（チェーンも可能で、便利な場合があります）

jQuery.fn.hoveranim = function () {
    $(this).hover(function() {
         $(this).animate({left: '+=260px'}, '6000');

    },
    function() {
        $(this).animate({left: '-=260px'}, '6000');
         }
     )};

次に、ドキュメントの準備ができたイベントで、このようにバインドします（' $(document).ready）

$('div#feedback-form-container').hoveranim();

デモについては、このフィドルを参照してください。

PS：移動する要素をアニメーション化すると、カーソルの下から要素を移動するときに、mouseoutイベントが自動的にトリガーされることに注意してください。その（潜在的に望ましくない）効果については、私のフィドルを参照してください。

これを回避するために、静的なままで、できれば非表示（ブロック要素である必要があります）で、移動する要素の上に配置される2番目の要素を導入することをお勧めします。次に、オプションのelemパラメーターを受け入れるように関数を書き直し、この要素にカーソルを合わせたときに移動する要素を指定します。

私はこれを別のフィドルで解決しました（そしてここでは目に見えないhover_checkを使用しています）

于 2012-11-20T11:09:34.543 に答える