Home / Articles / Programming languages / Scripting languages / JavaScript / jQuery for beginners: effects

jQuery for beginners: effects

jQuery for beginners: effects
 
jQuery for beginners: effects
  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


In this article we continue to study jQuery. Let's start with Effects.

I wanted to write a very complex article about Effects, with examples of animation, but the end result was more like a short explanation, which will help you to understand the effects in jQuery.

Animate

Remember - all the animation effects in jQuery revolve around the function animate - this function takes one or more CSS properties of the element and changes them from start to the end in a certain number of iterations (the number of iterations depends on the time specified, but no less than one iteration every 13ms.

The function animate can have the following parameters:

  • params - description of the CSS properties of the element - those that will be animated (let's say we have div with height of 100px - we tell the program magical word animate ({height: 200}) - and the height smoothly changes to 200px);
  • duration - speed of the animation - set in milliseconds, or by using the keywords "fast" = 200ms, "normal" = 400ms or "slow" = 600ms;
  • easing - here we specify which function will be used to increase values, you can choose between "linear" and "swing";
  • callback - the function is triggered when the animation is completed.

An alternative way to initialize:

  • params - description of the CSS properties of the element, those that will be animated.
  • options - object of the options:
    • duration - see above;
    • easing - see above;
    • complete - similar to the previously described callback-parameter;
    • step - also similar to the callback function - responsible for step-by-step change of the parameters - see example below;
    • queue - the queue flag, if set to false - then the flagged animation will ignore the queue and start immediately.

 If you look in the user manual - under the category Effects you may find a few additional functions:

  • show() - displays the selected elements;
  • hide() - hides the selected elements;
  • toggle() - switches between show / hide;
  • slideDown( speed, callback ) - pulls the object(s) down - increases the height from 0 to 100%;
  • slideUp( speed, callback ) - pulls the object (s) up - reduces the height from 100% to 0;
  • slideToggle( speed, callback ) - switches between slideDown/slideUp;
  • fadeIn( speed, callback ) - displays the selected elements - changes the opacity level of the element(s);
  • fadeOut( speed, callback ) - hides the selected elements - changes the opacity level of the element(s);
  • fadeTo( speed, opacity, callback ) - changes the opacity of the elements to a specified value.

The most simple methods to use are hide and show, they don't need the function animate, because they manipulate only the attribute display:

// Call of the method
$( '#my' ).hide();
 
// similar
$( '#my' ).css({ display: 'none' });
 
// But if you set the speed of this animation or the callback function,
// it'll change the values of height and width 

Live demo

As I've mentioned before - other additional functions are only wrappers for animate, let's look at the example:

// Call of the method
$( '#my' ).slideUp();
 
// similar
$( '#my' ).animate({ height: 0, padding: 0 }, function(){
  $( this ).css({ display: 'none' });
});
 
// Call of the method
$( '#my' ).fadeOut();
 
// similar
$( '#my' ).animate({ opacity: 0 }, function(){
  $( this ).css({ display: 'none' });
});

Live demo

In fact, implementing these methods is a little more complicated than that, but you got the basic idea.

It should also be noted of how to set the CSS parameters for animate:

// Set the opacity of the element to zero , the opacity varies from 0 to 1
$( '#my' ).animate({ opacity: 0 });
 
// Increasing the height of the element by 200px
$( '#my' ).animate({ height: '+=200px' });
 
// Decreasing the width of the element by 50px
$( '#my' ).animate({ width: '-=50px' });
 
// Increasing the height of the element to 20in
$( '#my' ).animate({ height: '20in' });

Step callback

Do not forget about the step-by-step function, here is an example:

var customStep = function( now, obj ) {
  now; // current value of the animated property
 
  obj.elem; // animation element
  obj.prop; // animated property
  obj.start; // start value
  obj.end; // end value 
 
  obj.pos; // factor varies from 0 to 1
  // the value now is calculated as, now = (obj.end - obj.start) * obj.pos
 
  obj.options; // animation option settings
 
  // text output
  $( this ).html( 'Height: ' + now + obj.unit );
}
$( 'p' ).animate({ height: height }, { step: customStep });

Live demo

Disable animation

Sometimes you need to disable all the animation (for debug) - use the following construction:

jQuery.fx.off = true;

Queue

And now a little bit about the queue of the function animate - the majority of the readers are already familiar with organizing the sequence of the animation - for this we can use the chain of calls:

$( '.panel' ).animate({ left: '+=100' })
  .animate({ top: '+=100' }); // the following animation is added to the queue for execution

To run more than one animation at the same time you will need to make the following changes:

$( '.panel' ).animate({ left: '+=100' })
  .animate({ top: '+=100' }, { queue: false }); // by this we indicate that the queue can be ignored

There is similar function stop - with the help of this function you can stop the current or all the animations:

$( '.panel' ).stop(); // stop the current animation
$( '.panel' ).stop( true ); // stop the current animation and all the subsequent ones (clear of the queue)
$( '.panel' ).stop( true, true ); // stop the current animation and all the subsequent ones, but apply the results of the current
$( '.panel' ).stop( false, true ); // stop only the current animation, and apply its results

Live demo

Now we understand how to clear the queue, but let's try to dig a little deeper and find out how to manage the queue. For this purpose jQuery has the following functions:

  • queue( name ) - returns the queue - the array of functions;
  • queue( name, callback ) - adds a function into the queue;
  • queue( name, queue ) - replaces the current queue with a new one;
  • dequeue( name ) - executes the first function in the queue.

By default, all the manipulations are made by the queue "fx" - meaning, the queue with all the animation.

You may use the following functions to manage the animation:

$( '.panel' ).queue( 'fx' ); // returns all the animations in the queue
$( '.panel' ).data( 'fxqueue' ); // similar to the previous row
 
$( '.panel' ).queue( function(){ /*...*/ } ); // adds a new function to the queue
 
$( '.panel' ).queue( 'fx', [] ); // this call clears all the queue – then we set an empty array as a new queue
 
$( '.panel' ).dequeue(); // runs the first element from the queue

Live demo

Here is an realization of a queue which is different from the "fx":

var queue = $( '.panel' ).queue( 'custom' );
queue.push(function(){
  $( '.panel' ).css({ background: '#ffdddd' })
    .dequeue( 'custom' );
});
 
$( '.panel' ).queue( 'custom', queue )
  .dequeue( 'custom' );

Right now I see one flaw - all the animations use the queue "fx", and this can't be changed, that is, the animation either is executed with other animations in the queue, or runs immediately by itself, and it's impossible to assign the animation to another the queue.

Easing

Let's go back to the animation and pay more attention of how to "increase" CSS property values. Example:

param = (to ? from) ? delta + from;
 
// from - the start value of the parameter
// to - the end value of the parameter
// delta - if the factor equals 0, we get the start value of the parameter, if 1 - end

Live demo

By default, changing the delta is done only by a linear equation, you can optionally specify 'swing', but by using the plug-in easing, you supplement the list:

  • Quad - quadratic function (delta = progress2);
  • Cubic - cubic function (delta = progress3);
  • Quart - delta = progress4;
  • Quint - delta = progress5;
  • Expo - exponential function (delta = 2 (progress - 1) ? 8);
  • Circ - quarter of a circle (delta = 1 - sin (acos (progress)));
  • Sine - segment of sine (delta = 1 - sin ((1 - progress) ? ? / 2));
  • Back - first draws delta to negative, and then smoothly adjusted to 1;
  • Bounce - bouncing effect;
  • Elastic - elastic effect(gum).

These functions can have the following parameters (names of parameters were taken from jquery.js):

  • p - the progress factor of the animation changes from 0 to 1;
  • n - factor of time duration (p * duration);
  • firstNum - start value = 0;
  • diff - changing value = 1.

Plug-ins

There are several plug-ins that extend the functionality of animate:

  • easing - additional equations for easing (allows you to vary the animation);
  • color - allows you to smoothly change the font / background / border color;
  • backgroundPosition - it can animate the background image of the elements.

Conclusion

The conclusion is clear - the majority of plug-ins for animation are just wrappers for animate, and therefore you should not always connect third-party plug-ins to accomplish your goals.


 

Read also

jQuery for beginners: selectors

jQuery for beginners: selectors

jQuery for beginners: AJAX

jQuery for beginners: AJAX

jQuery for JavaScript

jQuery for JavaScript

jQuery UI. Widgets. Dialog (Windows)

jQuery UI. Widgets. Dialog (Windows)

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation