Montreal studio of designer Maxim Aginsky
Menu
Hide and show the search box with jQuery

Hide and show the search box with jQuery

When working on Web Talk To site design version four, I checked few techniques – using CSS3 and JS – that help me creating nice and smooth animation effect for search box container. Here I will share the result using jQuery – .animate().

.animate() – performing an animation of a CSS properties.

jQuery is a cross-browser JavaScript library created by John Resig in 2006.
The library designed to simplify the client-side scripting of a HTML or XHTML documents.

.animate()

Hide

Source code


<div class="example-cont">
    <div class="example-bg"></div>
    <div class="example-block">
        <img id="example-right" src="http://www.webtalkto-version-9dot2.webtalkto.com/wp-content/uploads/2014/01/search.png"/>
        <div id="example-left">Hide</div>
    </div>
</div>

<style type="text/css">
.example-cont {
	position: relative;
	width: 410px;
	height: 80px;
	margin: 20px 0;
	background-color: #fff;
}
.example-bg {
	position: absolute;
	width: 165px;
	height: 80px;
	z-index: 200;
	background: #000;
	opacity: 0.8;
	border-radius: 4px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9);
}
.example-block {
    position: absolute;
	z-index: 100;
}
#example-left {
	margin-left: 10px;
	font-weight: bold;
	color: #B30890;
	cursor: pointer;
}
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
	$( "#example-right" ).click(function() {
	  $( ".example-block" ).animate({ "left": "165px" }, "slow" );
	});
	 
	$( "#example-left" ).click(function(){
	  $( ".example-block" ).animate({ "left": "0px" }, "slow" );
	});
</script>

Beautiful!

WebTalkTo website design version 9 handcrafted with the greatest care in October 2016.
Find more about other design versions @ Site Design Archive.
Follow us on: