jQuery Slide Effects with examples - jQuery Tutorial

jQuery Fade Effects and Examples

Slide Down with click event slideDown()


jQuery

$(document).ready(function(){
     $("button#SlideDonw").click(function(){
          $("#SlideTExtDown").slideDown();
     });
});

HTML

<button class="btn btn-primary" id="SlideDonw" type="button">Slide Down <i class="fa fa-angle-double-down"></i></button> <div class="alert alert-success" id="SlideTExtDown" style="display:none;">Your Contant Here</div>
Output

Slide Up with Click event slideUp()


jQuery

$(document).ready(function(){
     $("#SlideTrig").click(function(){
          $("#Slideup").slideUp();
     });
});

HTML

<div class="alert alert-success" id="Slideup"> Your Content Here </div> <button class="btn btn-primary" id="SlideTrig"><i class="fa fa-eye-slash"></i> SlideOut</button>
Output
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur provident facilis praesentium voluptatem, optio maxime ad, itaque dolorem, ab aut atque nemo necessitatibus at illo dignissimos molestiae. Quod, facilis, optio?

Slide Toggle with click event slideToggle()


jQuery

$(document).ready(function(){
     $("#ToggleButton").click(function(){
          $("#SlideToggle").slideToggle();
     });
});

HTML

<div class="btn btn-success" id="ToggleButton">Slide Toggle</div>
<img src="../images/jquery.png" id="SlideToggle">
Output
Slide Toggle

Post a Comment