jQuery Basic Effects

To change an element`s display to block and hidden
//make css diplay to 'block'
$("div").show();  

//make css diplay to 'hidden'
$("div").hide();
ExampleShow/hide elements
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-section29 div").click(function(){
        $("#example-section29 div").each(function(){
            $(this).show();
        });
        
        $(this).hide();
    });
});
</script>

<!-- HTML -->
<a name="#show-hide-effect"></a>
<style>
  #example-section29 div {
    width:60px;
    height:60px;
    border:0px solid black;
    padding:5px;
    text-align:center;
    margin-right:15px;
    margin-top:5px;
    margin-bottom:5px;
    background-color:lightgreen;
    cursor:pointer;
  }
</style>
<div id="example-section29">
    <table>
        <tr>
            <td style="width:60px">
                <div id="div291">LEFT</div>&nbsp
            </td>
            <td style="width:60px">
                <div id="div292">MIDDLE</div>&nbsp
            </td>
            <td style="width:60px">
                <div id="div293">RIGHT</div>&nbsp
            </td>            
        </tr>
    </table>
    
    <br/>Click on squre to hide it    
</div>



 
Display or hide elements
$("div").toggle();
ExampleToggle 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 (){
    $("#example-section30 button[id='btn303']").click(function(){    
        $("#example-section30 div").toggle();
    });

    $("#example-section30 button[id='btn304']").click(function(){    
        $("#example-section30 div").toggle("slow");
    });
});
</script>

<!-- HTML -->
<a name="#toggle-effect"></a>
<style>
  #example-section30 div {
    float:left;width:50px;height:50px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section30">
    <div id="div301" style="display:none">Tiger</div>    
    <div id="div302">Goat</div>
    <br style="clear:both"/>
    <button id="btn303" type="button">toggle</button>&nbsp;    
    <button id="btn304" type="button">toggle with animation</button>    
</div>



comments powered by Disqus