Question

我坚持使用我的代码。我使用focusin（）函数来检测textarea上的用户交互。我的理念：

first init =＆gt;所有都折叠自动高度（50px）
first focus-in =＆gt;聚焦元素将扩展到更多像素（150像素）
现在，我知道，每当我对我的任何元素进行新的关注时，我都有一个，当前正在打开。因此，我为这个想法创建了一个原始的例程：

var active = false;
myTextAreas.focusin(function() { 
    if (active == true) {
        myTextAreas.animate({"height" : 50}, 300);
        $(this).animate({"height" : 150}, 500); 
    } else {
        $(this).animate({"height" : 150}, 500);
        active = true;
    };

myTextAreas =＆gt;带有我的HTML元素的对象（textareas）。第一次=＆gt;做别的，第二次=＆gt;总是if语句，每次返回时调整所有元素的大小，而不是将元素移动到更高的高度。它主要起作用，但是当我第一次使用我的小脚本时，我的盒子首先调整大小并且结束另一个盒子，这是新的焦点在一起，用新的animate（）函数开始得太早了。然后它工作......嗯。但我认为我的代码不是很漂亮？

我在概念中遗漏了一个功能。当我关注任何textarea时，我想要回复所有元素的动画，类似于我的if语句中的效果。但是，我怎么能这样说，但只能在我的其他元素上，而不是我的焦点在textareas？

也许我的观念不好？顺便说一下，我开了一个新的......

Answer 1

您可以通过使用jquery blur事件绑定来消除活动变量/需要跟踪“活动”状态 - 您也不需要在所有输入字段上调用动画

myTextAreas.on('focus',function() { 
  $(this).animate({ height : 150 }, 500);  
});

myTextAreas.on('blur',function() { 
$(this).animate({ height : 50 }, 300);
});

演示：http://jsbin.com/axatin/3/edit#javascript,html,live

jQuery中的新手 - 关注和转出textareas

1 个答案: