javascript - 使用 jQuery .animate 进行搜索框动画

Question

尊敬的人......

我正在研究我的应用程序的搜索组件...

http://jsfiddle.net/SkyKOG/K8utq/24/

input{
    display:none;
    width:0px;
    color:#999;
}

最初我只有一个搜索框，所以当前的功能就是为了那个......但现在的要求是这样......

文本框应该被隐藏并且应该出现然后点击搜索图标展开......（尝试做显示：无并且点击芽对我不起作用）......

非常感谢 ...

问候

Answer 1

假设这是你想要的..

使用图标的单击事件来切换文本框...与您的其余代码

 $('#searchinout').find('i').click(function(){
    $('#expandbox').toggle('slow');
});

这是你的CSS

#expandbox{
  display:none;
}

在这里摆弄

Answer 2

你可以试试下面的代码。

input{
    width:0px;
    color:#999;
    opacity:0;
}

var inputWdith = '200px';
var inputWdithReturn = '0px';   

$(document).ready(function() {
  $('.icon-search').click(function(){
    //animate the box
    $('#expandbox').animate({
      width: inputWdith,
      opacity: 1
    }, 800 )
    $('#expandbox').focus();
  }); 

  $('#expandbox').blur(function(){
    $(this).animate({
      width: inputWdithReturn,
      opacity: 0
    }, 800 )

  });
});

Answer 3

$(document).ready(function () {

//hide the textbox on document ready
$("#txtSearch").hide();

//make it visble on search icon click
$(".Search").click(function () {
$("#txtSearch").show();
});

});

或者您可以将文本框的显示属性设置为无，并将其设置为阻止图标 click() 事件。