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.
Animate functions work only with one item and only in browsers that support CSS3 Transitions.
animate.css
libraryanimateOut
and animateIn
options with the style names you picked.$('.custom1').mightySliderAnimate({ animateOut: 'slideOutDown', animateIn: 'flipInX' });
$('.custom1').mightySliderAnimate({ animateOut: ['slideOutDown', 'flipOutX', 'fadeOutDown', 'bounceOut', 'zoomOut'], animateIn: ['flipInX', 'bounceIn', 'fadeInUp', 'zoomIn'] });
<⁄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.
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 ] );
[ options ]
object
Object with plugin options. All options are documented below:
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.