jQuery: slideToggle effect

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

The slideToggle displays or hides the matched elements with a sliding motion.

Its code isĀ .slideToggle(duration).

<!doctype html>
<head>
    <title>slideToggle demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            width: 400px;
        }
    </style>
</head>
<body>

<button>Toggle</button>
<p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
</p>

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

</body>
</html>

Try The Code

jQuery: Show effect

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

The show effect will display the matched elements.

Its code is .show(duration).

<!doctype html>
<html>
<head>
    <title>show demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>
<body>

<button>Show it</button>
<p style='display: none'>Hello 2</p>

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

</body>
</html>

Try The Code

To make this demo, we first need to hide the text inside the <p> elements.

This can be done by style=’display: none’.

jQuery: Toggle effect

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

The toggle effect displays or hides the matched elements.

Its code is .toggle(duration).

<!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').toggle('slow');
    });
</script>

</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

jQuery: Common animation effects

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

The jQuery library provides several techniques for adding animation to a web page.

These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects such as those used in jqueryui.com or jquerymobile.com.

EffectDescription
.animate()Perform a custom animation of a set of CSS properties.
.delay()Set a timer to delay execution of subsequent items in the queue.
.fadeIn()Display the matched elements by fading them to opaque.
.fadeOut()Hide the matched elements by fading them to transparent.
.fadeTo()Adjust the opacity of the matched elements.
.finish()Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
.hide()Hide the matched elements.
.show()Display the matched elements.
.slideDown()Display or hide the matched elements with a sliding motion.
.slideUp()Hide the matched elements with a sliding motion.
.slideToggle()Display or hide the matched elements with a sliding motion.
.toggle()Display or hide the matched elements.