Forget about using jQuery in this scenario; all you need is CSS:
input.focus-actions:focus + .submit {
display: block;
}
.submit {
display: none;
}
Your HTML code may resemble the following structure:
<form action = "/">
<fieldset>
<legend>My Focus Form</legend>
<input type = "text" class = "focus-actions" placeholder = "Write your message here..." required autofocus/>
<footer class = "submit">
<button type=submit>Send Message</button>
<button>Close</button>
</footer>
</fieldset>
</form>
If you wish to incorporate a fading effect, consider applying animations like these:
.submit {
-webkit-animation: fadeIn 1s ease;
-o-animation: fadeIn 1s ease;
animation: fadeIn 1s ease;
}
@-moz-keyframes fadeIn {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: none;
filter: none;
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: none;
filter: none;
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: none;
filter: none;
opacity: 1;
}
}
@keyframes fadeIn {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: none;
filter: none;
opacity: 1;
}
}