Learn jQuery Effects

 

Learn jQuery Effect Methods 

  

jQuery Home

coding-zon-jq-effect-methods


jQuery Effects: 

This tutorial explains to you how to use jQuery effects. You will also learn what are the different types of jQuery effects and where to use them in a webpage. In this tutorial, you will learn each type of effect with simple example. Just copy and save the file with given name, in your folder and open in a browser. Make sure you have an internet. If you are working offline, then download jQuery library and add to the program as shown in Introduction part.

Using jQuery, you can add different type of effects to HTML elements. These all predefined methods in jQuery. The following picture shows a list of jQuery effect methods in each group.

jQuery Display Effects          jQuery Fading                  jQuery Sliding          jQuery Animations

Display Effects

 

 

Hide, Show

Hide_show_effect.html

 
<html>
<head>

 
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
 
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
});
$("#show").click(function(){
$("div").show();
});
});
</script>
</head>
<body>
<div> 
<p>Click me tp "Hide" button</p>
<img src="https://loremflickr.com/640/360"> 
</div>
<button id="hide">Click to Hide</button>
<button id="show">Click to Show</button>

</body>
</html> 

Syntax 

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

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

 Goto Menu

hide function is taking 2 parameters 

1. Speed parameter specifies the speed of the hiding/showing. This parameter is optional, 

it Can take the options like: "slow", "fast", or milliseconds. 

2. The callback parameter is a function. It is optional. It is executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).  

 Hide_hide_effect.html

 
<html>
<head>
 <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide("slow");
});
$("#show").click(function(){
$("div").show("slow");
});
});
</script>
</head>
<body>
<div> <p>Click me tp "Hide" button</p> 
 <img src="https://loremflickr.com/640/360" > 
</div>
<button id="hide">Click to Hide</button>
<button id="show">Click to Show</button>
</body></html>

jQuery toggle()

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

 Goto Menu

Toggle_effect.html 


 
<html>
<html>
<head>
 <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
$("div").toggle("slow");
});

});
</script>
</head>
<body>
<div> <p>Click me tp "Hide" button</p>  
 <img src="https://loremflickr.com/640/360" > 
</div>
<button id="click">Click to Toggle</button>

</body></html>
 
 
 

jQuery Fading Methods 

 

Goto Menu

 

With jQuery, you can fade an element in and out of visibility. jQuery provides the following fade methods: 

 
  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
 

fadein.html

 
<html>
<head>
 
<style>
div{
	display:none;
	border-radius:50%;
}
</style>
 
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>

 
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
 
</script>
</head>
<body>
<p> fadeIn() effect with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1">
<img id="img1" src="https://loremflickr.com/100/100"><br>   
</div>  
<div id="div2">
<img id="img2" src="https://placekitten.com/100/100"><br>  
</div> 
<div id="div3">

<img id="img3" src="https://placebear.com/100/100"><br>  
</div> 
 
</body>
</html> 
 

 Goto Menu

 

Exaltation:

 

There are 3 div in the HTML document.

In the script, each div element is attached with one fadeIn() effect.

1st one is simple fadeIn()
2nd one is fadeIn with predefined delay parameter
3rd is fadeIn with custom delay 

 
Fade-in Example-2
 
fadein2.html 
 
<!doctype html>
<html lang="en">
<head>
 
  <style>
  p {
    position: relative;
    height: 90px;
 }
  div {
    position: absolute;
    width: 550px;
    height: 65px;
    background: #EA8974;
    padding-top: 25px;
    top: 0;
    left: 0;
    display: none;
    font-size: 36px;
    text-align: center;
    color: yellow;
  }
  span {
    display: none;
  }
</style> 
 
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>

Fog everywhere. Fog up the river, where it flows among green aits and meadows; fog down the river, where it rolls deified among the tiers of shipping and the waterside pollutions of a great (and dirty) city... (<a href="#">Readmore!</a>) <div><span>Please Subscribe!</span></div> 

</p>
 
<script>
$( "a" ).click(function() {
  $( "div" ).fadeIn( 3000, function() {
    $( "span" ).fadeIn( 100 );
  });
  return false;
});
</script>
 
</body>
</html>
 

 Goto Menu

jQuery fadeOut() Method 

 

The jQuery fadeOut() method is used to fade out a visible element. 

 

Fadeout_effect.html

 
 
<html>
<head>
  <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
 
<p>fadeOut() with different parameters.</p>
 
<button>Click to fade out Circles </button> 
<br><br> 
 
<div id="div1">
<img id="img1" src="https://loremflickr.com/100/100"><br>    
</div>  
<div id="div2">
<img id="img2" src="https://placekitten.com/100/100"><br>   
</div>  
<div id="div3">
<img id="img3" src="https://placebear.com/100/100"><br>  
</div> 
 
Example-2 
 
Fadeout_effect2.html 
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  p {
    font-size: 150%;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  If you click on this paragraph
  it will just fade away.
</p>
 
<script>
$( "p" ).click(function() {
  $( "p" ).fadeOut( "slow" );
});
</script>
 
</body>
</html>

 

 

 Goto Menu

 

jQuery fadeToggle() Method 

 

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. 

 

Fade_toggle_effect.html 

 
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>fadeToggle() Example with different speed parameters.</p>
<button>Click to fade in/out images</button>
<br><br>
<div id="div1">
<img id="img1" src="https://loremflickr.com/100/100"><br>    
</div>   
<div id="div2">
<img id="img2" src="https://placekitten.com/100/100"><br>   
</div>  
<div id="div3">
<img id="img3" src="https://placebear.com/100/100"><br>  
</div> 
</body>
</html>

 Goto Menu

jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1). 

 

Fadeto_effect.html
 
 
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.2);   // 0.0 100% fade
});
});
</script>
</head>
<body>
<p>fadeTo() with different parameters.</p>
<button>Click to fade boxes</button>
 
<div id="div1" style="background-color:
purple;;border-radius:50%;width:100px;height:100px;"></div><br>
<div id="div2" style="background-color:
orange;;border-radius:50%;width:100px;height:100px;"></div><br>
<div id="div3" style="background-color:red;;border-radius:50%;
 width:100px;height:100px;"></div>
 
 

jQuery Sliding Methods 

 
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
 
  •  slideUp()
  •  slideDown() 
  •  slideToggle()
  •  stop() Method 


 jQuery slideUp() Method

The jQuery slideUp() method is used to slide up an element. 


 

Slideup_effect.html
 

 <html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip,#panel
{
background-color:skyblue;
border:solid 1px blue;
padding:5px;
text-align:center;
}
#panel
{
padding:30px;
}
</style>
</head>
<body>
<div id="flip">Click here to slide up panel</div>
<div id="panel">
<img id="img1" src="https://loremflickr.com/400/200"><br> </div>
</body>
</html>  

 

jQuery slideToggle() Method

 
 slidetoggle.html
 
 <html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#flip,#panel
{
background-color:skyblue;
border:solid 1px blue;padding:5px;
text-align:center;}
#panel
{
padding:30px;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html> 
 
 
 

 Goto Menu

 

jQuery stop() Method

 
 
The jQuery stop() method is used to stop an animation or effect before it is finished
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#flip,#panel
{
background-color:skyblue;
border:solid 1px blue;padding:5px;
text-align:center;}
#panel
{
padding:30px;
display:none; 
 }
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello <br>
<img id="img1" src=" https://loremflickr.com/400/200"><br> </div> 
</body>
</html>


 

jQuery Animations 

 
  • jQuery animate() - Simple animate Method
  • jQuery animate() - Manipulate Multiple Properties
  • jQuery animate() - Using Relative Values
  • jQuery animate() - Using Pre-defined Values
  • jQuery animate() - Uses Queue Functionality
 

 

The animate() Method 

The jQuery animate() method is used to create custom animations. 

 
Animate.html
 
 
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'1050px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
 

 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>
</body>
</html>

 Goto Menu

jQuery animate() - Manipulate Multiple Properties

Notice that multiple properties can be animated at the same time:

 
Animate_multi_properties.html
 
 <html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
 
<button>Start Animation</button>
 

 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
 
</div>
</body>
</html> 

 

 Goto Menu

jQuery animate() - Using Relative Values 

 

It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value: 

 
Animate_relative.html
 
<html>
<head>
<script src="js/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
 
<button>Start Animation</button>
 

 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
 
</div>
</body> 
 

 Goto Menu

 

jQuery animate() - Using Pre-defined Values

You can even specify a property's animation value as "show", "hide", or "toggle": 

 

 
Animate_predefind_values.html
 
 
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
width:'toggle'
});
});
});
</script>
</head>
<body>
 
<button>Start Animation</button>

 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
 
</div>
</body>
</html>

 Goto Menu

jQuery animate() - Uses Queue Functionality

By default, jQuery comes with queue functionality for animations.

 
Animate_queue.html
 
 <html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'400px',opacity:'0.5'},"slow");
div.animate({width:'400px',opacity:'0.10'},"slow");
div.animate({height:'100px',opacity:'0.5'},"slow");
div.animate({width:'100px',opacity:'0.10'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved.
To manipulate the position, remember to first set the CSS position property
of the element to relative, fixed, or absolute!</p>
<div style="background:skyblue;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
The example below first moves the <div> element to the right, and then increases the font
size of the text: 
 
Example 2
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>

<div
style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO<
/div>
</body>
</html>

 




Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more