10 jQuery special effects worth adding to the favorites by Web designers (1)

JQuery is no longer a new thing. I used to think of it as a very difficult thing, so I didn't seriously understand it. It is not until the majority of CSS content has been learned that we have started to access this "write less, do more" Javascr into pt framework. The most important part of this article is a tutorial from Web Designer Wall, which contains 10 jQuery special effects. I don't want to translate the full text here. I want to express it in my own language. It may be easier for everyone to understand/learn it later, or to describe it more accurately.

Try it first? Special Effect instance:

View jQuery Demos: http://www.webdesignerwall.com/demo/jquery/

How does jQuery work?

First, you need to download a jQuery version and insert it into the

How to Get the element )?

Writing jQuery functions is very simple. The key is to learn how to obtain the exact elements of the effect you want to achieve.

 
 

  
  
("# Header") = get the id = "header" element
  
  
("H3") = get all  
  
("Div # content. photo") = get <div id = "content">
  
  
All elements defined by class = "photo"
  
  
("Ul li") = obtain the <li> element in <ul>
  
  
("Ul li: first") = only obtain the first <li> in <ul>
 
 

1. Simple drop-down panel

Let's start with this simple drop-down panel special effect. Maybe you have seen it many times. Now, try it on your own:

When an element containing class = "btn-slide" is clicked, the element in <div id = "panel"> is put down/up. Switch to the class = "active" to <a class = "btn-slide"> element in CSS .. Active will open/close the exit panel in CSS mode.

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".btn-slide").click(function(){     
  
  
 $("#panel").slideToggle("slow");     
  
  
 $(this).toggleClass("active");   
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

2. Simple hiding Effect

When the icon in the upper-right corner is clicked, the content is hidden.

When an image defined as is clicked, it finds its parent element <div class = "pane"> and activates its capabilities, gradually disappear and hide.

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".pane .delete").click(function(){     
  
  
 $(this).parents(".pane").animate({ opacity: "hide" }, "slow");   
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/simple-disappear.html

3. Continuous transition effect

Let's take a look at the power of jQuery's coherence. Only a few lines of code are required. I can make this square gradient fly with scaling ratio.

Line 1: When <a class = "run"> is clicked

Line 2: Activate <div id = "box"> opacity) = 0.1 until the value reaches 400px, the speed reaches pixel/MS

Line 3: When opacity = 0.4, top = 160px, height = 20, width = 20, displayed as "slow"

Line 4: When opacity = 1, left = 0, height = 100, width = 100, also displayed as "slow"

Line 5: When opacity = 1, left = 0, height = 100, width = 100, also displayed as "slow"

Line 6: When top = 0, displayed as "fast"

Line 7: Then, slide at constant speed (default speed = "normal ")

Line 8: then decline with "slow"

Line 9: If the returned result is invalid, the browser will not jump to the link anchor.

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".run").click(function(){  
  
  
 
  
  
   $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)     
  
  
   .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")     
  
  
   .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")     
  
  
   .animate({top: "0"}, "fast")     
  
  
   .slideUp()     
  
  
   .slideDown("slow")     
  
  
   return false;  
  
  
 
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/chainable-effects.html

4a. Foldable mode #1

This is the first foldable style.

The first line adds a CSS class "active" value to the first <H3> in <div class = "accordion">. The second line is just to hide the content of <div class = "accordion"> not the first <p>. When

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".accordion h3:first").addClass("active");   
  
  
 $(".accordion p:not(:first)").hide();  
  
  
 $(".accordion h3").click(function(){  
  
  
 $(this).next("p").slideToggle("slow")     
  
  
 .siblings("p:visible").slideUp("slow");     
  
  
 $(this).toggleClass("active");     
  
  
 $(this).siblings("h3").removeClass("active");  
  
  
 
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/accordion1.html

4b. Foldable mode #2

This instance is very similar to #1, but it will open the specified Panel as the default panel.

In the CSS style sheet, set. accordion p to display: none. Now, if you open the third panel like the default opening style, you can write $ (". accordion2 p "). eq (2 ). show (); (eq = equal) to implement it. Note that the starting point is "0" instead of "1". Therefore, the third corresponds to "2 ", instead of "3 ".

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".accordion2 h3").eq(2).addClass("active");   
  
  
 $(".accordion2 p").eq(2).show();  
  
  
 $(".accordion2 h3").click(function(){     
  
  
 $(this).next("p").slideToggle("slow")     
  
  
 .siblings("p:visible").slideUp("slow");     
  
  
 $(this).toggleClass("active");     
  
  
 $(this).siblings("h3").removeClass("active"); });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/accordion2.html

5a. Mouse activation effect #1

This will achieve a very beautiful gradient effect when the mouse passes. When you move the mouse over the menu, it looks for the next <em> and activates its opacity above it.

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".menu a").hover(function() {     
  
  
 $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");   
  
  
 }, function()   
  
  
 {     
  
  
 $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");   
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/animated-hover1.html

5b. Mouse activated #2

This instance displays the title attribute of the link in the menu, so that it exists as a variable, and adds the <em> label. The first line adds an empty <em> to the <a> element of the menu. When you move the cursor over the menu link, the title attribute is displayed in the form of "hoverText hidden)", and the text in <em> shows the hidden text value.

 
 

  
  
$(document).ready(function(){  
  
  
 
  
  
 $(".menu2 a").append("<em></em>");  
  
  
 
  
  
 $(".menu2 a").hover(function() {     
  
  
 $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");     
  
  
 var hoverText = $(this).attr("title");     
  
  
 $(this).find("em").text(hoverText);   
  
  
 }, function() {     
  
  
 $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");   
  
  
 });  
  
  
 
  
  
}); 
 
 

View demo: http://www.webdesignerwall.com/demo/jquery/animated-hover2.html