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 回答