Jquery //悬停动画正在删除Focus动画

Question

我正在使用“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”动画中删除动画这一事实，我希望动画不会改变，如果输入或textarea是专注并且用户在焦点区域上空盘旋。似乎无法想出这个。任何帮助表示赞赏！

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