How do I do other JQuery effects? [closed]

In 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 can access them from the library link itself.

However there is the Jquery UI collection, with numerous effects and functionalities a more. To access these features go to the link in this 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><scriptsrc="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>

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

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

However adding a whole library just to use part of it may be unnecessary.

jQuery is an extensible framework that allows you to add 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: link

View a library link that supports various effects like:

• swing, linear, ease, easeInQuad, easeInCubic, easeInQuint, easeInQuint, easeInSim, easeInExpo, easeInCirc, easeInBack, easeInBack, easeOutQuad, easeOutCubic, easeOutCubic, easeOutQuit, easeOutQuint, easeOutSim, easeOutExpo, easeOutCirc, easeOutBack, easeInOut, easeInOutQuad, easeInOutCubic , easeInOutQuit, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack

Take the link file ( it weighs on average ~ 7kb much lighter than jquery-ui) and next to jquery, like this:

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

  </head>