Question

这是我为测试下面的代码而创建的jsFiddle。您可以单击红色按钮将输入类型文本从0px扩展为220px并强制。

我的问题是：当它为零时如何使其正好为零？它不是0px，因为我希望对某些文本类型填充（因此左边框和文本之间有一些空格）

<style>
.srchbtn{
 background-color:red;
}
.srchbtn:hover {
 background-color: green;
}
input{
 padding-left:10px;
 padding-right:10px;
}
</style>
<br>
<div style="width: 220px;float: right;position: absolute;right: 10px;">
    <div class="srchbtn" style="width:40px; height:45px;border:1px solid red;float:right;"></div>
    <input type="text" id="box" style="width:0; float:right; height: 41px;" />
</div>
<script>
    $(document).ready(function(){
        $('.srchbtn').on('click',function(){
            var box = $('#box');
            var newWidth = box.width()>0 ? 0 : 150;
            box.animate({ width:  newWidth }, 'slow');
        });
     });
</script>

Answer 1

您想要以下内容吗？

jsfiddle

$(document).ready(function(){
    $('.srchbtn').on('click',function(){
        var box = $('#box');
        var newWidth;

        if(box.width() > 0){
            newWidth = 0;   
            $('input').css('padding-left', '0');
        } else {
            newWidth = 150;
            $('input').css('padding-left', '10px');
        }

        box.animate({ width:  newWidth }, 'slow');
    });
 });

修改

依靠评论我提出了这个解决方案： jsfiddle

#box { padding: 0; float: right; height: 43px; width: 0px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; } #box.extended { width: 150px; padding: 0 10px; }

Answer 2

我改变了你的小提琴示例。

[example][1]


  [1]: http://jsfiddle.net/bcQs4/6/

Answer 3

您使用此结构：

$(".srchbtn").click(function(){
   var width = $("#box").css({width});
   var globalWidth = 0
   if(width > 0 ){
     globalWidth = 0
     $('input').css('padding-left', '0');
   }
   else {
        globalWidth = 150;
        $('input').css('padding-left', '10px');
   }
  $("#box").animate({width:globalWidth},300)
})

jQuery：如果里面有一些填充，则动画为零宽度

3 个答案: