1

「animateWithCss.js」プラグインと次のコードを使用して、使用しているフォームで box-shadow プロパティをアニメーション化しています。

$("input, textarea").hover(function(){
    $(this).animateWithCss({boxShadow: "0px 0px 8px #11E1DC"}, {duration: 200});
    }, function()   {
    $(this).animateWithCss({boxShadow: "0px 0px 0px #0080FF"}, {duration:100});
});

$("input, textarea").focus(function() {
    $(this).animateWithCss({boxShadow: "0px 0px 4px #0080FF, 0px 0px 4px #0080FF, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC"}, {duration: 200});
    });

$("input, textarea").blur(function(){
    $(this).animateWithCss({boxShadow: "0 0 0 #000"})
});

これは、「.hover」関数が「.focus」アニメーションからアニメーションを削除しているという事実を除いて、私が望むように機能します。入力またはテキストエリアがフォーカスされていて、ユーザーがフォーカスされた領域にカーソルを合わせます。これを理解できないようです。どんな助けでも大歓迎です！

4

1 に答える 1

1

使用できます

$("yourObject").is(":focus")

オブジェクトがフォーカスされているかどうかを確認し、の場合はホバー効果を防ぎますfocus。もちろん、他のクラス ( 、 など) でも機能しactiveますhover。

これは、達成しようとしていることを達成するために必要なすべてです。

編集: 多分私は不正確だった. 完全な作業コードは次のとおりです。

$("input, textarea").hover(function(){
    if ($(this).is(":focus")) { // Check if your object is being focused
       // Do nothing, do not activate hover effect
    }
    else { // Activate the effect
       $(this).animateWithCss({boxShadow: "0px 0px 8px #11E1DC"}, {duration: 200});
    }
}, function()   {
    if ($(this).is(":focus")) { // Check if your object is being focused
       // Do nothing, do not activate hover effect
    }
    else { // Activate the effect
       $(this).animateWithCss({boxShadow: "0px 0px 0px #0080FF"}, {duration:100});
    }
});


$("input, textarea").focus(function() {
    $(this).animateWithCss({boxShadow: "0px 0px 4px #0080FF, 0px 0px 4px #0080FF, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC, 0px 0px 8px #11E1DC"}, {duration: 200});
    });

$("input, textarea").blur(function(){
    $(this).animateWithCss({boxShadow: "0 0 0 #000"})
});
于 2012-05-23T14:32:51.587 に答える