只在IE-2中工作的jQuery动画

Question

我有一个非常简单的动画，如果我有一个标签在屏幕上，如果你点击它，它将增加大小。但是它只在IE上工作，下面是代码：

$(document).ready(function () {
    $("#a-tab,#a-tab > *")
        .on('focusin', function () {
        $("#a-tab").animate({
            width: '320px'}, "fast");
        $(".deluxe").animate({
            width: '30px'}, "slow");
    })
        .on('focusout', function () {
        $("#a-tab").animate({
            width: '10px'}, "fast");
        $(".deluxe").animate({
             width: '5px'}, "fast");
    });
});

它必须是#a-tab > *，因为它的内部内容

是问题所在，我如何使它与Chrome、Firefox等兼容。

http://jsfiddle.net/dadVt/

这是一个转发，因为我不知道如何得到快速的帮助，以另一种方式，如果你知道如何让我知道。(添加了完整代码)

页面- http://claudiacabrera.cl/flores.html

Answer 1

问题是，并非所有元素都是可聚焦的，DIV元素就是其中之一。

解决方法是将属性tabindex添加到元素中。这允许元素接收焦点(单击)，或者通过选项卡到元素上。

现在您的focusin和focusout事件处理程序将被触发。不幸的是，您需要触发焦点事件(例如单击body )？或者对另一个元素调用focus() )，以便关闭选项卡。

这里有一个更新的小提琴(包括jQuery )

http://jsfiddle.net/dadVt/1/