10 jquery special effects for designers

Source: Internet
Author: User
Tags rotate image
ArticleDirectory
    • How does jquery work?
    • How to get the element )?

From: http://www.happinesz.cn/

By sofish

Jquery is nothing new. I remember the first time I heard it was on catch the digital flow. I always think of it as a very difficult thing, so I didn't seriously understand him. 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. Today, the most important part of this article is a tutorial from web designer wall, which contains 10 special jquery 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.

Tip: The jquery version used in the tutorial is 1.2.3. This article is intended for beginners of jquery.

Try it first? View jquery demos | download demo zip

How does jquery work?

First, you need to download a jquery version and insert it<Head>Label. Then, you will need to write a function to tell jquery what to do. The following chart will show you how jquery works (click an image to view the big image ):

!

How to get the element )?

Writing jquery functions is very simple (thanks to the excellent instructions ). 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 ")= Obtain all elements defined by class = "photo" in <Div id = "content">
    • $ ("Ul li ")= Obtain the <li> element in <ul>
    • $ ("Ul Li: First ")= Only obtain the first entry in <ul> <li>
1. Simple drop-down panel

Let's start with this simple drop-down panel special effect.(View Demo),You may have seen it many times. Now, try it by yourself:

When an element containing Class = "BTN-slide" is clicked, it will drop down/raise <Div
Id = "Panel">. Switch to class = "active" in CSS to <
Class = "BTN-slide"> element .. Active will open/close the exit panel in CSS mode.

 
$ (Document). Ready (function (){

$ (". BTN-slide "). click (function () {$ ("# panel "). slidetoggle ("slow"); $ (this ). toggleclass ("active ");});

});
2. Simple hiding Effect

When the icon in the upper-right corner is clicked, the content is hidden. For more information, see the demo.(View demo)

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 ");});

});
3 Continuous transition effect

Let's take a look at the power of jquery's coherence. Just a few linesCode, I can make this square Gradient + zoom ratio fly(View demo)

line 1 : When is clicked
line 2 : activate the opacity of

$ (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;

});

});
4A. Foldable mode #1

This is the first foldable style,(View demo)

The first line adds a CSS to the first The value of class is "active. The second line just hides the non-first entry in <Div class = "accordion"> <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 ");

});

});
4b. Foldable mode #2

This instance is very similar to #1, but it will open the specified Panel as the default panel(View demo)

In the CSS style sheet, Set. Accordion PIsDisplay: 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, it should be noted that the starting point is "0", rather than "1", so the third corresponds to "2", rather than "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 ");});

});
5a. Mouse activation effect #1

This will achieve a very beautiful effect, when the mouse passes through the gradient appears(View demo)

When you move the mouse over the menu, it looks for the next <em> and activates its opacity above it.

 
$ (Document). Ready (function (){

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

});
5b. Mouse activation #2

This instance will displayTitleAttribute attribute to exist as a variable and add the <em> label(View demo)

Add an empty<Em>To the menu<A>Element.

When you move the cursor over the menu link, the title attribute is displayed, and displayed as "hovertext (hidden )".<Em>The value of hidden text is displayed.

 
$ (Document). Ready (function (){

$ (". Menu2 a"). append ("<em> </em> ");

$ (". Menu2 "). 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 ");});

});
6. Clickability of the entire block

This example will show you how to achieve the clickability of elements in the content. The best web gallery sidebar tab will show this effect.(View demo)

If you want the class = "pane-list"<Ul> <Li>Click (entire block). You can assign a function to ". pane-list li" so that the function can be found when it is clicked.<A>Element, redirected to itsHrefAttribute Value.

 
$ (Document). Ready (function (){

$ (". Pane-list li "). click (function () {window. location = $ (this ). find (""). ATTR ("href"); Return false ;});

});
7. Retractable panel

Let's combine the above instances to create a retractable Panel (like gmai inbox panel L ). The author also applies this in the next2friends Comments List of web designer wall.(View demo)

first line : hide the elements after the first element in

$ (Document). Ready (function (){

// Hide message_body after the first one $ (". message_list. message_body: GT (0)"). Hide ();

// Hide message Li after the 5th $ (". message_list Li: GT (4)"). Hide ();

// Toggle message_body $ (". message_head "). click (function () {$ (this ). next (". message_body "). slidetoggle (500) return false ;});

// Collapse all messages $ (". collpase_all_message"). Click (function () {$ (". message_body"). slideup (500) return false ;});

// Show all messages $ (". show_all_message "). click (function () {$ (this ). hide () $ (". show_recent_only "). show () $ (". message_list Li: GT (4 )"). slidedown () return false ;});

// Show recent messages only $ (". show_recent_only "). click (function () {$ (this ). hide () $ (". show_all_message "). show () $ (". message_list Li: GT (4 )"). slideup () return false ;});

});
8. Imitating the WordPress background comment Management Panel

I think you may have seen this most times in the WordPress background comment Management Panel. Well, let's use jquery to simulate its effect. To realize the background color, you need to includeColor animationsThis plugin(View Demo)

First line: Add "Alt" class to <Div class = "pane">
Second part: When <a class = "BTN-Delete"> is clicked, the opacity of <Div class = "pane"> is activated.
Third part: When <a class = "BTN-unapprove"> is clicked, first set <Div class = "pane"> to yellow and then white, and add a class (addclass) "spam"
Fourth Part: When <a class = "BTN-approve"> is clicked, first set <Div class = "pane"> to green and then white, and remove the class (removeclass) "spam"
Th part: When <a class = "BTN-spam"> is clicked, the background color is red and opacity = "hide" is activated"

// Don't forget to include the color animations plugin // <SCRIPT type = "text/JavaScript" src = "jquery. color. js"> </SCRIPT>

$ (Document). Ready (function (){

$ (". Pane: Even"). addclass ("Alt ");

$ (". Pane. BTN-Delete"). Click (function () {alert ("this comment will be deleted! ");

$ (This ). parents (". pane "). animate ({backgroundcolor: "# fbc7c7"}, "fast "). animate ({opacity: "hide"}, "slow") return false ;});

$ (". Pane. BTN-unapprove "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# fff568"}, "fast "). animate ({backgroundcolor: "# ffffff"}, "slow "). addclass ("spam") return false ;});

$ (". Pane. BTN-approve "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# dafda5"}, "fast "). animate ({backgroundcolor: "# ffffff"}, "slow "). removeclass ("spam") return false ;});

$ (". Pane. BTN-spam "). click (function () {$ (this ). parents (". pane "). animate ({backgroundcolor: "# fbc7c7"}, "fast "). animate ({opacity: "hide"}, "slow") return false ;});

});
9. Rotate Image Display bar

If you have a project that needs to display multiple images and you do not want to link them to another page, you can load the JPG of the target link on the current page.(View demo)

First, add a <em> to H2 tag.

When the elements in <P class = thumbs> are clicked:
-Visualized displayHref"Largepath" Path of the attribute
-Visualized displayTitleAttribute "largealt"
-Replace SCRThe visible "largepath" path in the property, and replace itALTVisible "largealt" in the attribute"
-SetEmContent (Within H2) Is visible largealt

$ (Document). Ready (function (){

$ ("H2"). append ('<em> </em> ')

$ (". Thumbs a"). Click (function (){

VaR largepath = $ (this). ATTR ("href"); var largealt = $ (this). ATTR ("title ");

$ ("# Largeimg"). ATTR ({SRC: largepath, alt: largealt });

$("H2 em" 2.16.html ("(" + largealt + ")"); Return false ;});

});
10. Customize different link styles

In modern browsers, personalized links are easy to use. To display special styles in a file, you only need to add simple CSS rules:A [href has been 'shanghai'] {… }But unfortunately IE6 does not support this. To achieve this, you can use jquery(View demo)

The first three lines of code must be continuous.<A>Is a CSS class in the href attribute.

The second part gets the <A> element of all href without "http://www.webdesignerwall.com" and/or without "#", and adds "external" class and target = "_ blank ".

  $ (document ). ready (function () {
$ ("A [@ href $ = PDF]"). addclass ("pdf");
$ ("A [@ href $ = zip]"). addclass ("Zip");
$ ("A [@ href $ = PSD]"). addclass ("PSD");
$ ("A: Not ([@ href * = http://www.webdesignerwall.com])"). not ("[href ^ = #]"). addclass ("external "). ATTR ({target: "_ blank"});

});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.