jQuery Fading/Sliding Effects

To Fade in and fade out 
$("div").fadeIn("slow");
$("div").fadeOut("slow");
ExampleFading effect with given speed
Source Code Expand 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#div311").click(function(){        
        $("#div312").fadeIn(speed());
    });

    $("#div312").click(function(){
        $(this).fadeOut(speed());
    });

    var speed = function(){
        return $.isNumeric($("#tb313").val()) ? parseInt($("#tb313").val()) : 500;
    }
});
</script>

<!-- HTML -->
<a name="#fading-with-speed"></a>
<style>
  #example-section31 div {
    width:70px;height:70px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
    cursor:pointer;
  }
</style>
<div id="example-section31">    
    <table>
        <tr>
            <td style="width:60px">
                <div id="div311" style="background-color:lightgreen">Click me</div>
            </td>
            <td style="width:60px">
                <div id="div312" style="display:none;background-color:orange">
                    I`m fading in,<br>click me to fade out
                </div>        
            </td>            
        </tr>
    </table>

    Fading speed <input id="tb313" type="text" value="1000" style="width:50px">  milliseconds
</div>
Adjust the opacity - fade to 
$("div").fadeIn("slow");
$("div").fadeOut("slow");
ExampleFade in and fade out
Source Code Expand 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#example-section32").click(function(){                
        var div = $("#div322");
        div.css("opacity") == 1 ? div.fadeTo("slow", 0.0) : div.fadeTo("slow", 1.0);
    });
});
</script>

<!-- HTML -->
<a name="#fadein-fadeout"></a>
<style>
  .book1 {
    float:left;width:100px;height:50px;border:1px solid black;
    text-align:center;margin:10px;background-color:blue;color:white;
  }

  .book2 {
    float:left;width:100px;height:50px;border:1px solid black;
    text-align:center;margin:10px;
    position:relative;top:-0px;left:-122px;
    opacity:0.0;
  }
</style>
<div id="example-section32">    
    <div class="book1" id="div321">A book holds</div>
    <div class="book2" id="div322" style="color:gold"><br>a house of gold</div>    
    <br style="clear:both"/>
    Click on book!
</div>
Display elements with sliding motion (up or down) 
$("div").slideUp("slow");
$("div").slideDown();
ExampleSliding effect
Source Code Expand 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#div331").click(function(){    
        if($("#div331").text().indexOf("down") != -1){
            $(".curtain1").slideUp(1000, function(){
                $("#div331").html("Pull the curtain up");
            });
        }else{
            
            $(".curtain1").slideDown(1000, function(){
                $("#div331").html("Pull the curtain down");
            });
        }                
        
    });
});
</script>

<!-- HTML -->
<a name="#sliding-effect"></a>
<style>
  .curtain1 {
    float:left;width:100px;height:50px;border:1px solid black;
    text-align:center;margin:10px;background-color:orange;    
  }
</style>
<div id="example-section33" style="overflow:hidden">    
<div><a href="javascript:void(0)" id="div331">Pull the curtain down</a></div>
    <div class="curtain1"></div>
    <div class="curtain1"></div>
    <div class="curtain1"></div>
    
    <br style="clear:both"/>    
</div>

More examples
comments powered by Disqus