How do I do other Jquery effects?

Question

I was able to make those effects fadeIn() and fadeOut(), but I’d like to know how I do the other effects like the pop.

I used this system:

$(document).ready(function (e){
    $("#menu").fadeIn();
    $("#menu ul li a").click(function(event){
        event.preventDefault();
        link = this.href;
        $("body").fadeOut( function(){
            window.location = link;
        });        
    });
});

Answer 1

In the jquery documentation you have the complete list of effects of the library itself.

The main ones are:

• .animate()

• .fadeIn()

• .fadeOut()

• .fadeToggle()

• .show()

• .hide()

• .sildeUp()and its variations

Among others.

These effects are part of Jquery itself. You have access to them through the library’s own link.

Meanwhile there is the collection Jquery UI, with numerous effects and functionalities more. To have access to these low functionalities have access to the link of that collection. Below are some demonstrations of these effects. The code was taken from the site itself.

  $(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 === "transfer" ) {
        options = { to: "#button", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // run the effect
      $( "#effect" ).effect( selectedEffect, options, 500, 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;
    });
  });

    .toggler { width: 500px; height: 200px; position: relative; }
    #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; }
    .ui-effects-transfer { border: 2px dotted gray; }

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Effect</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </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="fade">Fade</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>
  <option value="transfer">Transfer</option>
</select>
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

Answer 2

jQuery only has two effects by default, however using jquery-ui it is possible to add a number of effects like:

Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide and Transfer

However adding an entire library just to use part of it may be unnecessary.

jQuery is an extensible framework or supports adding functionality to existing events, for example:

$.fx.step['size'] = function(fx)
{
   if ( !fx._sizeInit )
   {
      var $el = $(fx.elem),
          c = fx.end.center || {top: 0, left: 0};

      fx.start = $el.offset();
      $.extend(fx.start, {width: $el.width(), height: $el.height()});

      fx._sizer = {};

      fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);
      fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);
      fx._sizer.widthDelta = fx.end.width - fx.start.width;
      fx._sizer.heightDelta = fx.end.height - fx.start.height;

      fx._sizeInit = true;
   }

   fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';
   fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';
   fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';
   fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px';

};

The use would be:

$('myDiv')
    .animate({
          size: {
                 center: {top: 0, left: 30}, 
                 height: 100, 
                 width: 200
                }
       }, 'slow');

^{Source: http://www.benknowscode.com/2012/09/extending-jquery-animate-beyond-basic_6504.html}

View a library https://github.com/benignware/jquery.fx-transition which supports various effects such as:

• swing, linear, ease, easeIn, easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInBack, easeOut, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack, easeInOut, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack

Take the file https://github.com/benignware/jquery.fx-transition/blob/master/dist/jquery.fx-transition.min.js (weighs on average ~7kb much lighter than jquery-ui) and next to jquery, so:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplo</title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="../dist/jquery.fx-transition.js"></script>

  </head>