Javascript Jquery//悬停动画正在删除焦点动画

我正在使用“animateWithCss.js”插件和以下代码在我使用的表单中设置长方体阴影属性的动画：

$("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”动画中删除动画之外，这与我所希望的一样，我希望如果某个输入或文本区域被聚焦，并且用户将鼠标悬停在聚焦区域上，动画不会改变。我似乎无法理解这一点。感谢您的帮助

您可以使用

$("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"})
});

你可以用

$("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"})
});

---

我试着使用：“$（“输入，文本区域”）.is（“：focus”）.animateWithCss（{boxShadow:“0px 0px 4px 35; 0080FF”}，{duration:200}）；并得到“Uncaught TypeError:Object false没有方法‘animateWithCss’”。尝试将其用作“is:focus”的函数，但它没有做任何事情。我实现它错了吗？是的，你是：$（“输入，文本区域”）.is（：focus）是一个函数，我用完整的实现编辑了我的答案。谢谢，但仍然是一个问题。即使你在悬停函数中用引号引上了“this”，我还是纠正了它，尽管在函数（）上的“else”之后出现了“Uncaught SyntaxError:Unexpected token function”错误“。我正在查看它，据我所知，我似乎没有发现任何语法错误…是的，好吧，现在没有错误，但它的功能与我最初设置它的方式完全相同。。。知道为什么吗？对不起，我确信我的解决方案是正确的。这应该是最后一个（总是犯愚蠢的错误）。我尝试使用：“$”（“输入，文本区域”）.is（“：focus”）.animateWithCss（{boxShadow:“0px 0px 4px(0080FF”），{duration:200}）；并获得“uncaughttypeerror:objectfalse没有方法‘animateWithCss’”。尝试将其用作“is:focus”的函数“，它什么也没做。是的，你是：$（“输入，文本区域”）。是（“：焦点”）是一个函数，我用完整的实现编辑了我的答案。谢谢，但还是一个问题。即使您在hover函数中用引号括起了“this”，我还是纠正了它，尽管在函数（）的“else”之后出现了“Uncaught SyntaxError:Unexpected token function”错误。我正在查看它，我似乎没有发现任何语法错误，据我所知…是的，好吧，现在没有错误，但它的功能与我最初设置它的方式完全相同。。。知道为什么吗？对不起，我确信我的解决方案是正确的。这应该是最后一个（总是犯愚蠢的错误）。