Question

我有以下jQuery代码，当用户与文本框交互时隐藏并显示标签。一些场景：

1。）用户焦点，标签应为50％不透明度 2.）用户类型，标签应为0％不透明度 3.）用户删除所有内容但仍保持专注，标签应为50％不透明度 4.）用户删除所有内容和焦点，标签应为0％不透明度 5.）用户类型内容和焦点，标签应为0％不透明度

所以简而言之，如果输入有价值，那么没有标签，如果重点是50％，如果没有价值那么100％不透明度。

代码如下：

            $('label.placeholder').each(function() {

                var label = $(this);

                var input = label.next('input');

                label.click(function()
                {
                    input.focus();
                });

                input.bind('keyup keydown focus click check change paste copy', function()
                {
                    if (input.val().length > 0)
                    {
                        label.animate({ opacity: 0 }, 200);
                    }
                    else
                    {
                        label.animate({ opacity: .6 }, 200);
                    }

                }).bind('blur', function()
                {
                    label.animate({ opacity: 1 }, 200);

                });

问题是，如果用户快速输入或执行多个操作，则可能导致淡入或淡出需要一段时间，因为必须对每个交互回调的每个方案进行所有检查。一个很好的例子是输入一个文本加载然后再将其全部删除，您将看到重新显示标签需要一段时间。

关于如何防止这种情况的任何想法？ http://jsfiddle.net/fFGM7/

Answer 1

在所有动画之前使用.stop()。我相信这会解决它：

$(label).stop().animate({ opacity: 1 }, 200);

jQuery在用户交互上隐藏和显示标签

1 个答案: