Home » Tutorials » JavaScript » jQuery Effects

jQuery Effects

The effects used in jQuery are probably the cool effects that you have seen on others’ websites. They are extremely powerful and actually require a sizable amount of JavaScript if you were to write it without using the jQuery effects. It is important to understand how these effects work so that you have a greater knowledge of JavaScript. Often, we find ourselves looking for the easy solution, but in fact, it is usually the hard way that teaches us the lessons and concepts that we should know.

If you saw the example in the events, our example will look very familiar.

Example
<button id="button1">Hide</button>
<button id="button2">Show</button>
<ul id="someList">
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#button1").click(function()
    {
        $('#someList li:first').hide();
    });
    $("#button2").click(function()
    {
        $('#someList li:first').show();
    });
</script>

Pretty awesome, huh? We are using the different ids of the buttons to run the jQuery function that we want. We use two effects here, hide and show to change the visibility of the first <li> in our <ul> with an id of someList. Obviously, the hide effect is the one that makes the element invisible, and the show effect makes the element visible.

More Common Effects

  • animate() – changes a set of CSS properties with the option to animate the changes.
  • fadeIn() – animates the element from hidden to visible
  • fadeOut() – animates the element from visible to hidden
  • slideDown() – animates the change of the elements height from hidden to visible
  • slideUp() – animates the change of the elements height from visible to hidden
  • toggle() – alternatives between show and hide effects

One quick note here. We could have only used one button in the example above if we used toggle instead of hide and show. Remember, effects are your friend. Also, don’t forget to use jQuery’s official reference guide at jQuery Effects.



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "jQuery Effects". After Hours Programming. Accessed on March 19, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/jquery-effects/.

  • Stewart, Suzy. "jQuery Effects". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/jquery-effects/. Accessed 19 March, 2024.

  • Stewart, Suzy. jQuery Effects. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/jquery-effects/.



0 thoughts on “jQuery Effects”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.