输入slideUp / slideDown问题 [英] Input slideUp/slideDown issue

问题描述

看起来像jQuery删除了一个输入字段的值，这个输入字段已经被滑落，然后又下降了。不太确定它是否是占位符，但是内置的slideUp / Down似乎会影响输入字段。

下面是一个示例： http://jsfiddle.net/k3Bc2/


<$ p $ （函数（））{
$（'input [type =text（））{code $（document）.ready（function（）{
$（'＃slideUp'）。 ）'）。slideUp（1000）;
}）;
$ b $（'＃slideDown'）。click（function（）{
$（'input [type = text]'）。slideDown（1000）;
}）;
}）;

如果您在输入字段中输入一个值，然后单击slideUp按钮并等待它向上滑动然后单击slideDown，您将看到缺少输入字段的值。




是否有人知道解决方法以获取有关链接示例的slideUp / slideDown？

如果使用google chrome给出一个为什么的概念。

解决方案

输入高度为0时发生错误。您应该更改您的方法。使用CSS掩盖动画方法的位置：

这里是演示链接。您将检查此方法不会有任何错误。

jQuery：

<$ p $ （函数（））{
$（'input [type =text（））{code $（document）.ready（function（）{
$（'＃slideUp'）。 ）'）。stop（）。animate（{'top'：'200px'}，400）;
}）;

$（'＃slideDown'）。click（function （）{
$（'input [type =text]'）。stop（）。animate（{'top'：'0px'}，400）;
}）;
}）;

html：

 < div id =mask> 
< input id =motiontype =textvalue =placeholder =Enter some text ../> 
< / div> 
< input type =buttonvalue =slideUpid =slideUp/> 
< input type =buttonvalue =slideDownid =slideDown/> 
  

css：

  #mask {position：relative; 160像素;高度：25像素;溢出：隐藏;顶部：0;左：0; } 
 #motion {position：absolute;顶部：0;左：0; } 
 input {position：relative; } 
  

Seems like jQuery removes the value of a input fields that has been slided up and then afterwards down. Not quite sure if it's the placeholder who does it but the built in slideUp/Down seems to bug the input field.

Here is a example: http://jsfiddle.net/k3Bc2/

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').slideUp(1000);
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').slideDown(1000);
    });
});

If you enter a value in the input field and click the slideUp button and wait till it's slided up and then click the slideDown you will see the value of the input field is missing.

Does anyone know a workaround to get a slideUp/slideDown working on the example linked?
Using google chrome if that gives an idea of why.

解决方案

Error occurs when height of the input comes 0. You should change your method. Use css position with masking animate method:

Here is demo link. You'll inspect there will be no bug with this method.

jQuery:

$(document).ready(function () {
    $('#slideUp').click(function () {
        $('input[type="text"]').stop().animate({'top':'200px'},400);
    });

    $('#slideDown').click(function () {
        $('input[type="text"]').stop().animate({'top':'0px'},400);
    });
});​

html:

<div id="mask">
   <input id="motion" type="text" value="" placeholder="Enter some text.." />
</div>
<input type="button" value="slideUp" id="slideUp" />
<input type="button" value="slideDown" id="slideDown" />​

css:

#mask { position:relative; 160px; height:25px; overflow:hidden; top:0; left:0; }
#motion { position:absolute; top:0; left:0; }
input { position:relative; } ​

这篇关于输入slideUp / slideDown问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！