jQuery: Toggle an image

This entry is part 21 of 33 in the series jQuery Tutorial

Here I show an example where you can toggle an image using toggle().

Clicking inside the <div> which I have defined with a border will toggle the image to show and hide in the screen.

hide demo

<!doctype html>
<html>
<head>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        $(function () {
            $('div').click(function () {
                $('img').toggle('slow');
            });
        });
    </script>
</head>
<body>

<div><img src="//codecrawl.com/code/images/ushuaia1.jpg"></div>

</body>
</html>

The syntax for toggle is:

.toggle(duration [,easing] [,function()])

Duration:  A string or number determining how long the animation will run.

Easing:  A string indicating which easing function to use for the transition.

Function():  A function to call once the animation is completed, this is also known as callback function.

Series Navigation<< jQuery: Toggle effect
jQuery: Show effect >>