Menu ▼


By using jQuery animate, we can give the fadein fadeout effect to control background color.This example will show you how to animate control background color using jQuery.
Note: Animate function will not work with background color, to make it work we need to use jQueryUI. So we need to add reference to jQueryUI file.

Syntax:

$(selector).animate({ backgroundColor: "colorcode" }, timeinterval);

Example:
Place the cursor here to see the hover effect using jQuery & jQueryUI.

Code:
$(document).ready(function () {
    $("#divhover").hover(function () {
        $(this).animate({ backgroundColor: "red" }, 2000);
    },
function () {
    $(this).animate({ backgroundColor: "green" }, 2000);
});
});

Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#divhover").hover(function () {
                $(this).animate({ backgroundColor: "red" }, 2000);
            },
function () {
    $(this).animate({ backgroundColor: "green" }, 2000);
});
        });
    </script>
</head>
<body>
    <div id="divhover" style="height: 100px; width: 200px; cursor: pointer; background: green;
        padding: 20px; font-size: 20px; color: #fff;">
        Place the cursor here to see the hover effect using jQuery & jQueryUI.
    </div>
</body>
</html>
Read More...
Submited By : mrkraju On 23 Apr 2015

This example will shows you how to change the div background color using jquery hover event. we have to write two functions first function will fire when mouse pointer/cursor move on to a div and the second function will fire when cursor moved out from the div.

$(document).ready(function () {
    $("#divhover").hover(function () {
        $(this).css("background", "blue");
    },
        function () {
            $(this).css("background", "orange");
        });
});

Example:
Place the cursor here to see the hover effect using jQuery.

Source Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#divhover").hover(function () {
                $(this).css("background", "blue");
            },
        function () {
            $(this).css("background", "orange");
        });
        });
    </script>
</head>
<body>
    <div id="divhover" style="height: 100px; width: 200px; cursor: pointer; background: orange;
        padding: 20px; font-size: 20px; color: #fff;">
        Place the cursor here to see the hover effect using jQuery.
    </div>
</body>
</html>
Read More...
Submited By : mrkraju On 21 Apr 2015

JQuery ready event will fire when the page is load completed at client side. Generally we will use ready event to bind events, apply styles or other manipulations.


Applying styles to div in ready event

Style applied to this div using JQuery in ready event.
In this example we applied Background color, fore color, height, width using JQuery.

<script language="javascript">

    $(document).ready(function () {

        $("#divContent").css("background-Color","green");

        $("#divContent").css("height", 100).css("width", 250).css("padding", 10).css("color","white");

        $("#divContent").css("text-align","justify");

        $("#divContent").css("border-radius", 15).css("-moz-border-radius", 15);

    });

</script>


Adding events to button in ready event

We can apply different styles using JQuery, In this example we applied animationto button using jquery, when you click this button it's height & width will be increasesautomatically and reset to its normal positon by using jquery animation.

    <script language="javascript">

        $(document).ready(function () {

            $("#btnClick").css("background-Color", "orange").css("color", "white").css("border", "1px solid gray");

            $("#btnClick").css("padding", "5px 20px").css("margin", 0).css("cursor","pointer");

            $("#btnClick").css("border-radius", 15).css("-moz-border-radius",15);

            $("#btnClick").on("click",function (e) {

               e.stopPropagation();

                varorghieght = $(this).outerHeight();

               varorgwidth = $(this).outerWidth();

               $(this).animate(

               { height: $(this).height()* 5 }

               , 1000, function () {

                   $(this).animate(

               { width: $(this).width()* 5 }

               ,1000, function () {

                   $(this).animate(

                {height: orghieght }

               , 1000, function () {

                   $(this).animate(

               { width: orgwidth }

               , 1000, function () {

                });

               });

               });

               });

            });

        });

    </script>

Read More...
Submited By : mrkraju On 05 Dec 2013




Search dotnetlearners.com