CODEWITHSUNDEEP
javascriptjquerycssformsjquery-ui
SkyKOG
SkyKOG

Reputation: 287

using jQuery .animate for search box animation

Respected ppl ....

Im working on the search component of my app ...

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

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

Initially i just had a searchbox so the current functions are for that .... but now the requirement is as such ...

The text box should be hidden and should appear then expand on click on the search icon ... (tried doing display:none and on click bud didnt work for me) ...

Thanks very much ...

Regards

Upvotes: 0

Views: 1858

Answers (3)

helloworld0123
helloworld0123

Reputation: 26

you may try the code below.

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 )

  });
});

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

$(document).ready(function () {

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

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

});

or you can set the display property of textbox to none and set it to bloock on icon click() event.

Upvotes: 1

bipen
bipen

Reputation: 36541

assuming this is what you want..

use click event of icon to toggle the textbox...with rest of your code

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

and this to your CSS

#expandbox{
  display:none;
}

fiddle here

Upvotes: 3

Related Questions