Table of contents

M4Q Effects

You can control element visibility with special effects functions.

About

You can control element visibility with special visibility functions: fadeIn(), fadeOut(), slideIn(), slideOut().

Fade effect

To toggle element display property with fade effect, you can use functions fadeIn() and fadeOut(). 


                    <button class="button" onclick="$('#div-fade').fadeIn()">Fade In</button>
                    <button class="button" onclick="$('#div-fade').fadeOut()">Fade Out</button>
                    <div id="div-fade" class="demo-box bg-red"></div>

Slide effect

To toggle element display property with slide effect, you can use functions slideDown() and slideUp(). 


                    <button class="button" onclick="$('#div-slide').slideUp()">Slide Up</button>
                    <button class="button" onclick="$('#div-slide').slideDown()">Slide Down</button>
                    <div id="div-slide" class="demo-box bg-red"></div>

Function arguments

Each effect function may take the following arguments:

  • duration - animation duration
  • easing - easing function name
  • callback - function was executed when animation finished

                    $(...).fadeIn(1000, 'linear', function(){
                       console.log('Animation done');
                    })
                

                    <button class="button"
                        onclick="$('#div-slide2').slideUp(1000, 'easeOutBounce')">Slide Up</button>
                    <button class="button"
                        onclick="$('#div-slide2').slideDown(1000, 'easeOutBounce')">Slide Down</button>

                    <div id="div-slide2" class="demo-box bg-red"></div>