html中依次展开的搜索框,jQuery+CSS3动画展开收缩搜索框特效

js代码

function searchToggle(obj, evt){

var container = $(obj).closest('.search-wrapper');

if(!container.hasClass('active')){

container.addClass('active');

evt.preventDefault();

}

else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){

container.removeClass('active');

// clear input

container.find('.search-input').val('');

// clear and hide result container when we press close

container.find('.result-container').fadeOut(100, function(){$(this).empty();});

}

}

function submitFn(obj, evt){

value = $(obj).find('.search-input').val().trim();

_html = "Yup yup! Your search text sounds like this: ";

if(!value.length){

_html = "Yup yup! Add some text friend :D";

}

else{

_html += "" + value + "";

}

$(obj).find('.result-container').html('' + _html + '');

$(obj).find('.result-container').fadeIn(100);

evt.preventDefault();

}