JQuery

How to create color animation effect on search button click in jquery?

How to create color animation effect on search button click in jquery?, someone asked me to explain?
By:

To attract the user with different smoothly animation effects using several css properties such as color, background color, border-color, and outline color for search box. It was achieved by jQuery’s animate() method let’s look at the example.

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color animationeffect on search button click</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        input {
            width: 200px;
            height: 40px;
            border: 1px solid #B6BBBF;
            font-size:19px;
        }
        .btn {
            width: 100px;
            height: 50px;
            background: #00BCD4;
            border-style: solid;
            border-color: white;
            color: white;
        }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#btnsearch").click(function (e) {
               e.preventDefault();
                var input = $(this).prev();
                if (input.val() == "") {
                   input.animate({
                       backgroundColor: "#f78080",
                       borderTopColor: "#a72b2e",
                       borderRightColor: "#a72b2e",
                       borderBottomColor: "#a72b2e",
                       borderLeftColor: "#a72b2e"
                   }, 1200);
               } else {
                   input.animate({
                       backgroundColor: "#CDDC39",
                       borderTopColor: "#C9D64D",
                       borderRightColor: "#E7F37A",
                       borderBottomColor: "#E7F37A",
                       borderLeftColor: "#C9D64D"
                   }, 1200);
               };
            });
 
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px; height: 250px; font-family: Arial;">
    <h1 style="color: #E91E63">color animation effect on search button click  </h1>
    <input>
    <button class="btn" id="btnsearch">Search</button>
</body>
</html>

Output:

color animation effect on search button click

Related Article

Post your comments / questions



Recent Article