Show/Hide button for a search field

Question

I have made a form where the submit button will show if the text box is focused and the button will hide if the text box is blurred.

These codes work fine. But I wonder if the jQuery code could be more simplified. Or is there any toggle function available?

var search = $("#search");
var button = $("#submit-button");
search.focus(function(){
    button.slideDown("slow");
});
search.blur(function(){
   button.slideUp("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
    <div>
        <input type="text" name="search" title="search" class="search" id="search" placeholder="Enter text here"/>
    </div>
    <button type="submit" class="submit-button" id="submit-button" name="submit" style="display: none">Click to Search</button>
</form>

Note: I can do it with click function. But I want to do it with focus and blur

Answer 1

Chaining is the power way in jQuery:

var button = $("#submit-button");
$("#search").focus(function(){
    button.slideDown("slow");
}).blur(function(){
   button.slideUp("slow");
});