javascript - 这个搜索页面是如何实现的(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 .