codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Jquery – Hide – Show – Fade – Slide

    3rd September 2013

    Jquery Misc

    jquery icon

    HIDE / SHOW

    1
    2
    3
    4
     
    $(".dog").show();
    $(".dog").hide();
     

    FADE

    1
    2
    3
    4
    5
    6
     
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
    $('#div3').fadeOut("slow");
     

    1
    2
    3
    4
    5
     
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
     

    SLIDE

    1
    2
    3
    4
    5
     
    $("#panel").slideDown();
    $("#panel").slideUp();
    $("#panel").slideToggle();
     

    1
    2
    3
     
    $("#panel").toggle();
     

    Slide Left/Right (You need Jquery UI)

    1
    2
    3
    4
     
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    $('#example1').hide("slide", { direction: "right" }, 1000);
     

    Delay

    1
    2
    3
     
    $("#step2").delay(700).show("slide", { direction: "right" }, 500);
     

    Easings in and out

    1
    2
    3
    4
     
    $(this).animate({height: "show"}, 600, "easeOutBounce");//opens only
    $(this).animate({height: "hide"}, 600, "easeOutBounce");//hides only
     

    Can replace this boring version!

    1
    2
    3
     
          $(this).appendTo($('#ticker')).slideDown();
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN