JQuery Video Tutorial Pt 5

JQuery AnimationIn this JQuery video tutorial I introduce the JQuery UI library. I also show you numerous ways to animate elements using JQuery. I cover hide, show, toggle, fadeOut, fadeTo, slideUp, slideDown, animate and effect. I also cover numerous other properties.

If you missed part 1 of this tutorial watch it first JQuery Video Tutorial.

If you want the JQuery UI library, it can be found here JQuery UI Library

All of the code and additional comments on the code follow the video. If you have any questions or comments leave them below.

Code From the Video

<html>

<head>

<title>JQuery Animations</title>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

 

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js”></script>

 

<script type=”text/javascript”>

$(“document”).ready(function() {

 

$(‘#hideLogo’).bind(‘click’, hideTheImage);

$(‘#showLogo’).bind(‘click’, showTheImage);

$(‘#toggleText’).bind(‘click’, toggleTheText);

$(‘#fadeLogo’).bind(‘click’, fadeTheImage);

$(‘#fadeALittle’).bind(‘click’, fadeALittle);

$(‘#fullOpacity’).bind(‘click’, fullOpacityImage);

$(‘#slideAway’).bind(‘click’, slideTheImage);

$(‘#slideBack’).bind(‘click’, unslideTheImage);

$(‘#customAnim’).bind(‘click’, customAnimate);

$(‘#shakeLogo’).bind(‘click’, shakeLogo);

$(‘#bounceLogo’).bind(‘click’, bounceLogo);

$(‘#highlightLogo’).bind(‘click’, highlightLogo);

$(‘#pulsateLogo’).bind(‘click’, pulsateLogo);

$(‘#sizeLogo’).bind(‘click’, sizeLogo);

 

});

 

function hideTheImage() {

$(‘#logo’).hide(‘puff’,{}, 2500);

// I could also hide with effects .hide(‘effect’, {properties}, 1000);

// Effects: blind, clip, drop, explode, fade, fold, puff, slide, scale

 

}

 

function showTheImage() {

$(‘#logo’).show(‘fold’, {}, 2500);

}

 

// Displays or hides matching elements on the page

function toggleTheText()

{

$(“h4″).toggle(2500);

}

 

function fadeTheImage() {

$(‘#logo’).fadeOut(2500);

}

 

function fadeALittle() {

$(‘#logo’).fadeTo(2500,.30);

}

 

function fullOpacityImage() {

$(‘#logo’).fadeTo(2500,1);

}

 

function slideTheImage() {

$(‘#second’).slideUp(2500);

}

 

function unslideTheImage() {

$(‘#second’).slideDown(2500);

}

 

// animate only allows linear or swing easing

// With the JQuery UI Library you get many more easeOutElastic, easeInCirc,

// easeInOutExpo, easeOutBack, easeInOutElastic, easeOutBounce

function customAnimate() {

$(‘#logo’).animate({opacity: 0.25, height: ‘150px’}, 2000, ‘easeOutBounce’);

}

 

function shakeLogo() {

$(‘#logo’).effect(‘shake’, {times:5, direction:’down’, distance: 10}, 200);

}

 

function bounceLogo() {

$(‘#logo’).effect(‘bounce’, {times:5, direction:’up’, distance: 10}, 200);

}

 

function highlightLogo() {

$(‘h3’).effect(‘highlight’, {color: ‘purple’}, 500);

}

 

function pulsateLogo() {

$(‘#logo’).effect(‘pulsate’, {times:5}, 200);

}

 

function sizeLogo() {

$(‘#logo’).effect(‘size’, { to: {height: 350, width: 350}}, 200);

}

 

 

 

</script>

</head>

 

<body>

<div><h3>Playing with Animation’s</h3></div>

 

<div id=”logoDiv”>

<img src=’http://www.newthinktank.com/images/ThinkTankLogo.gif’ id=’logo’ height=’75’ alt=’Little Brain’ />

</div>

<br />

 

<div>

<h4>Message 1</h4>

<h4 style=”display: none”>Message 2</h4>

</div>

 

<div>

<p id=”second”>Here today, gone in a click!</p>

<p id=”third”>Waiting for Change</p>

</div>

 

<br />

 

<form action=””>

<button type=”button” id=”hideLogo”>Hide the Logo</button>

<button type=”button” id=”showLogo”>Show the Logo</button>

<button type=”button” id=”fadeLogo”>Fade the Logo</button>

<button type=”button” id=”fadeALittle”>Fade a Little</button>

<button type=”button” id=”fullOpacity”>Full Opacity</button>

<button type=”button” id=”toggleText”>Toggle the Text</button>

<button type=”button” id=”slideAway”>Slide away Text</button>

<button type=”button” id=”slideBack”>Slide Text Back</button>

<button type=”button” id=”customAnim”>Custom Animation</button>

<button type=”button” id=”shakeLogo”>Shake Logo</button>

<button type=”button” id=”bounceLogo”>Bounce Logo</button>

<button type=”button” id=”highlightLogo”>Highlight Logo</button>

<button type=”button” id=”pulsateLogo”>Pulsate Logo</button>

<button type=”button” id=”sizeLogo”>Size Logo</button>

</form>

 

 

 

</body>

</html>

 

 

9 Responses to “JQuery Video Tutorial Pt 5”

  1. Jay Chakra says:

    Hi derek,
    I am watching your tutorials from very earlier.
    Earlier this script worked fine.But now when I am using the same scripts its not working for any of the buttons. Please help

  2. John says:

    It wasn’t working for me either. It turns out there are some strange characters that look similar to quotes inserted where a few of the quotes should be in the code above. Once I changed those it started working.

    • admin says:

      Yes that is what you need to do with my older tutorials. It was part of an old security feature. If you replace backquotes with regular quotes everything works. Sorry about that

  3. Akhilesh says:

    Hey Derek,
    You are my Hero.Guide me like a mentor.Thanks for your great tutorials.
    Wishing you best Luck.. 🙂

    • admin says:

      Thank you very much. Always feel free to ask questions. Next Tuesday I’m holding a vote for the tutorials I’ll make over the next 6 months. Make sure you vote 🙂

  4. RalphZero says:

    Be sure to use the latest version of
    jquery-ui.min.js which is 1.9.2.

    http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/

  5. Isaac says:

    Hi Derek, I notice you don’t use anonymous functions when coding your jQuery, is it just for saving time or do you not find them necessary

Trackbacks/Pingbacks

  1. jQuery Animation FX | Javascript - [...] http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-5/ 0 30 Oct Posted: [...]

Leave a Reply

Your email address will not be published.

Google+