Thursday 4 May 2017

jQuery Effects - Hide and Show

jQuery Effects - Hide and Show Easy and simple methode

with code

Hide, Show, Toggle, Slide, Fade, and Animate

jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:



 $("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});


Example code for  Hide JQuery script

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){       // this Jquery code will hide the Text as user click on it
        $("p").hide();
});
    $("#show").click(function(){
        $("p").show();                       
// this Jquery code will hide the Text as user click on it    
 });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button></body>
</html>



you can add speed like feature in time J query function
synatax 

$(selector).hide(speed,callback);

$(selector).show(speed,callback); 



Example 

$("button").click(function(){
    $("p").hide(1000);       //  speed is in milliseconds
});



Toggle 

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Syntax
$(selector).toggle(speed,callback); 

exmple 
$("button").click(function(){
    $("p").toggle();
});
 



thanks and njoy  the code 

0 comments:

Post a Comment

Thank you