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.

jQuery UI & Effects: Hide Elements Using Custom Effects

This entry is part 9 of 10 in the series jQuery UI Effects

jQuery UI Effects – Hide Demo

Click the button above to preview the effect.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Hide Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            // run the currently selected effect
            function runEffect() {
                // get effect type from
                var selectedEffect = $('#effectTypes').val();

                // most effect types need no options passed by default
                var options = {};
                // some effects have required parameters
                if (selectedEffect === 'scale') {
                    options = { percent: 0 };
                } else if (selectedEffect === 'size') {
                    options = { to: { width: 200, height: 60 } };
                }

                // run the effect
                $('#effect').hide(selectedEffect, options, 1000, callback);
            };

            // callback function to bring a hidden box back
            function callback() {
                setTimeout(function () {
                    $('#effect').removeAttr('style').hide().fadeIn();
                }, 1000);
            };

            // set effect from select menu value
            $('#button').click(function () {
                runEffect();
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-widget-content ui-corner-all'>
        <h3 class='ui-widget-header ui-corner-all'>Hide</h3>

        <p>
            I will be gone. See you all.
        </p>
    </div>
</div>

<select name='effects' id='effectTypes'>
    <option value='blind'>Blind</option>
    <option value='bounce'>Bounce</option>
    <option value='clip'>Clip</option>
    <option value='drop'>Drop</option>
    <option value='explode'>Explode</option>
    <option value='fold'>Fold</option>
    <option value='highlight'>Highlight</option>
    <option value='puff'>Puff</option>
    <option value='pulsate'>Pulsate</option>
    <option value='scale'>Scale</option>
    <option value='shake'>Shake</option>
    <option value='size'>Size</option>
    <option value='slide'>Slide</option>
</select>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

</body>
</html>
Try The Code

jQuery: Hide effect

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

The jQuery hide effect will hide the matched elements.

Its code is .hide(duration), where duration is in ms.

The default for duration is 400ms.

<!doctype html>
<html>
<head>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            background: #dad;
            font-weight: bold;
        }
    </style>
</head>
<body>

<button>Click Me</button>
<p>Hiya</p>

<p>Such interesting text, eh?</p>

<script>
    $('button').click(function () {
        $('p').hide('slow');
    });
</script>

</body>
</html>

Try The Code