Loading...

To get fade out effect just set:

animateOut: 'fadeOut'

fadeOut value is the only built-in CSS animate style. However there are tons of additional CSS animations that you can use in mightySlider. Simply download animate.css library and you are ready to extend mightySlider with new fancy transitions.

Important:

Animate functions work only with one item and only in browsers that support CSS3 Transitions.

How to use additional animation from animate.css library

  1. Include mightyslider_effects.css into header.
  2. Include mightyslider.animate.plugin.min.js into footer.
  3. Set animateOut and animateIn options with the style names you picked.
$('.custom1').mightySliderAnimate({
  animateOut: 'slideOutDown',
  animateIn: 'flipInX'
});

Example with slideOutDown and flipInX

Example with random effects from a specific range

$('.custom1').mightySliderAnimate({
  animateOut: ['slideOutDown', 'flipOutX', 'fadeOutDown', 'bounceOut', 'zoomOut'],
  animateIn: ['flipInX', 'bounceIn', 'fadeInUp', 'zoomIn']
});

Usage

You need to put the following scripts just before the <⁄body>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Calling mightySlider Animate Plugin via jQuery proxy
		$('.frame').mightySliderAnimate({
			animateOut: 'fadeOut'
		});
	});
</script>

First make sure the HTML5 doctype is set as the very first line on the page:

<!DOCTYPE html>

Include jQuery 1.7 or above in the header. Going with the latest 1.10.x release is recommended for optimal performance, the Google CDN can be used to include this file.

Download mightySlider and upload the files from the package to your server. Include mightyslider.min.js and mightyslider.animate.plugin.min.js below jQuery. Also include mightyslider.css and mightyslider.animate.css and make sure the include paths point to the locations where the files have been uploaded.

<!-- mightySlider Animate Plugin requires jQuery 1.7+ and mightySlider 2+  -->
<!-- If you already have jQuery on your page, you shouldn't include it second time. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- mightyslider JS script file -->
<script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script>
<!-- mightySlider Animate Plugin JS script file -->
<script type="text/javascript" src="mightyslider/src/js/mightyslider.animate.plugin.min.js"></script>

<!-- mightySlider basic stylesheet with skins imported -->
<link rel="stylesheet" type="text/css" href="mightyslider/src/css/mightyslider.css"/>
<!-- mightySlider Animate Plugin basic stylesheet -->
<link rel="stylesheet" type="text/css" href="mightyslider/src/css/mightyslider.animate.css"/>

That's it! mightySlider Animate Plugin should now be ready for use.

Tip:

Gzipping helps reduce the total filesize to just 0.9kb.

You need use mightySlider HTML structure to create your slider. Read the documentation.


jQuery( '#frame' ).mightySliderAnimate( [ options ] );

     Arguments:

  • [ options ] object

    Object with plugin options. All options are documented below:


    Quick reference:

    mightySlider Animate Plugin call with all default options as defined in the source.

    jQuery( '#frame' ).mightySliderAnimate({
      // Options
      animateSpeed:   1000,     // Animations speed in milliseconds. 0 to disable animations.
      animateEasing:  'ease',   // Easing for duration based (tweening) animations.
      animateIn:      '',       // Animation effect name for upcoming slide.
      animateOut:     'fadeOut' // Animation effect name for current slide.
    });
    
    • animateSpeed number Default: 1000

      Animations speed in milliseconds.


    • animateEasing string Default: ease

      Easing function for duration based (tweening) animations.

      animateEasing: 'easeOutExpo'
      

    • animateIn string array Default: empty

      Animation effect name for upcoming slide.

      animateIn: 'fadeIn'
      
      animateIn: ['fadeIn', 'zoomIn']
      

    • animateOut string array Default: empty

      Animation effect name for current slide.

      animateOut: 'fadeOut'
      
      animateOut: ['fadeOut', 'zoomOut']
      

    All mightySlider default options are supported also.