这个搜索页面是如何实现的(javascript,css,jquery？)？

Question

http://designspiration.net - 如果你单击页面顶部的搜索,你会看到一个非常酷的最小搜索表单,但我不知道他们是如何做到的.有谁知道/有没有人能找出使用的是什么？谢谢

Answer 1

它完成了CSS和jQuery,实际上非常简单.我已经在jsFiddle上创建了一个示例,演示如何完成它:

$(document).ready(function(){
    var $overlay = $('#overlay');
    $('#search').click(function(){
        if ( $overlay.is(':visible') ) {
            $overlay.fadeOut();
        } else {
            $overlay.fadeIn();
        }           
    });

    $('#close').click(function(){
        $overlay.fadeOut();
    });

});

看看这里:http://jsfiddle.net/peduarte/VeRMW/

主要功能有,click,fadeIn和fadeOut.