如果聚焦是动作,如何停止fadeOut

时间:2013-08-12 22:36:19

标签: javascript jquery html css

当我选中其中一个复选框时,我希望checkboxcontainer不应该淡出。我怎样才能做到这一点?

LIVE DEMO

$(document).ready(function(){
  $(".textbox").focus(function(){
    $(".checkboxcontainer").fadeIn('fast');
  });
  $('.checkbox').change(function(){
    $(".checkboxcontainer").show();
  });
  $(".textbox").focusout(function(){
    $(".checkboxcontainer").fadeOut('fast');
  });
});

1 个答案:

答案 0 :(得分:3)

添加一个停止点:

$(document).ready(function () {
    $(".textbox").on({
        focus: function () {
            $(".checkboxcontainer").fadeIn('fast');
        },
        blur: function () {
            $(".checkboxcontainer").fadeOut('fast');
        }
    });
    $('.checkbox').on('change', function () {
        $(".checkboxcontainer").stop(true, true).show();
    });
});

FIDDLE

你也可以使用一个小超时,检查哪个元素有焦点,然后清除超时并重置焦点等。

$(document).ready(function () {
    var active, timer;
    $(".textbox").on({
        focus: function () {
            $(".checkboxcontainer").fadeIn('fast');
        },
        blur: function () {
            timer = setTimeout(function() {
                $(".checkboxcontainer").fadeOut('fast');
            },300);
        }
    });
    $('.checkbox').on({
        mousedown: function() {
            active = document.activeElement;
        },
        change: function () {
            clearTimeout(timer);
            active.focus();
        }
    });
});

FIDDLE