jQuery addClass example

Change class name on click in jQuery

by Qwerty_Wasd

HTML

<button id="cancel-searchbox"></button>
<div id="menu"><a href="index.html"><h1 title="Back to main page">Social Networks</h1></a>
	<span id="icon-n-input">
		<a href=""><button title="Find" id="search-button"></button></a>
		<img src="http://www.cyberforum.ru/img/icons/searchbox_icon.png">
		<input placeholder="Enter search query" id="search_input"/>
	</span></div>

CSS

#cancel-searchbox {
    width: 30px;
    height: 30px;
    position: absolute;
    border: 0.5px solid black;
    border-radius: 20px;
    margin-top: -10%;
    margin-left: 15px;
    opacity: 0;
    background: url(../img/icons/cancel-search_icon.png);
    background-size: 100%;
    background-color: #fff;
}
 
#menu {
    font-family: Comic Sans MS, sans-serif;
    font-size: 1.7 em;
    color: #4d2e70;
    margin-top: 10%;
}
 
#menu h1 {
    margin-bottom: 20px;
    font-family: Comic Sans MS, sans-serif;
    font-size: 1.7 em;
    color: #4d2e70;
}
 
#menu input {
    width: 520px;
    height: 35px;
    border: 1px solid silver;
    border-radius: 20px;
    padding-left: 30px;
    box-shadow: 0 0 6.5px rgba(0,0,0,0.5);
}
 
#menu span img {
    width: 22px;
    position: absolute;
    padding-left: 6.5px;
    padding-top: 7px;
}
 
#search-button {
    width: 22px;
    height: 22px;
    position: absolute;
    margin-left: 513.5px;
    margin-top: 7px;
    border: 0px;
    border-radius: 20px;
    opacity: 0;
    background: url(../img/icons/search_icon.png);
    background-size: 100%;
    background-color: #fff;
}

JavaScript

$('#search_input').keypress(function(e){
        $('h1').fadeOut();
        $('#menu').animate({marginTop:'20px'}, 390);
        $('#menuLinks').fadeOut();  
        $('#cancel-searchbox').animate({marginTop:'0px'}, 390);
        $('#cancel-searchbox').animate({opacity: '1'}, 390);
        $('#search-button').animate({opacity:'1'});
    });
    
    $('#cancel-searchbox').click(function (){
        $('#search_input').val('');
        $('h1').fadeIn();
        $('#menu').animate({marginTop:'10%'}, 390);
        $('#menuLinks').fadeIn();   
        $('#cancel-searchbox').animate({marginTop:'-10%'});
        $('#cancel-searchbox').animate({opacity: '0'});
        $('#search-button').animate({opacity:'0'});
    });
    
    $(document).keyup (function(e) {
        if(e.keyCode == 27) {
            $('#cancel-searchbox').click();
        }
    });