Question

我使用“与 Cs.js.s” 和以下代号插件来以我使用的窗体动画框阴影属性 :

$("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” 函数正在将动画从“.焦点” 动画中删除之外, 我希望动画不会改变, 如果输入或文本区域集中, 用户会徘徊在焦点区域上, 用户不会改变。似乎无法解开这个问题。任何帮助都会受到欢迎!

Answer 1

您可以使用

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

to check if an object is focused, preventing the hover effect in case of focus. Of course it would work with other classes (active, hover, etc.).

这是你完成你所要实现的目标所需要的一切。

EDIT: Maybe I was too inaccurate. Here s the full working code:

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

友情链接