Use jQuery & amp; CSS3 to achieve an elegant accordion effect. Use jquery

Use jQuery & CSS3 to achieve an elegant accordion effect. Use jquery

The accordion effect is often used to switch to display a set of content. This method can save both the webpage space and the animation effect. Today, we will create an elegant accordion content effect. The idea is to slide some vertical accordion labels when hovering. We will add someCSS3Attribute to improve the appearance.

 

 

Download the demo plug-in

 

Sample HTML code:

<ul class="accordion" id="accordion">    <li class="bg1">        <div class="heading">Heading</div>        <div class="bgDescription"></div>        <div class="description">            
Sample CSS code:
ul.accordion li .description h2{    text-transform:uppercase;    font-style:normal;    font-weight:bold;    letter-spacing:1px;    font-size:45px;    color:#444;    text-align:left;    margin:0px 0px 15px 20px;    text-shadow:-1px -1px 1px #ccc;}ul.accordion li .description p{    line-height:14px;    margin:10px 22px;    font-family: "Trebuchet MS", sans-serif;    font-size: 12px;    font-style: italic;    font-weight: normal;    text-transform: none;    letter-spacing: normal;    line-height: 1.6em;}ul.accordion li .description a{    position:absolute;    bottom:5px;    left:20px;    text-transform:uppercase;    font-style:normal;    font-size:11px;    text-decoration:none;    color:#888;}ul.accordion li .description a:hover{    color:#333;    text-decoration:underline;}
JavaScript code:
$(function() {    $('#accordion > li').hover(        function () {            var $this = $(this);            $this.stop().animate({'width':'480px'},500);            $('.heading',$this).stop(true,true).fadeOut();            $('.bgDescription',$this).stop(true,true).slideDown(500);            $('.description',$this).stop(true,true).fadeIn();        },        function () {            var $this = $(this);            $this.stop().animate({'width':'115px'},1000);            $('.heading',$this).stop(true,true).fadeIn();            $('.description',$this).stop(true,true).fadeOut(500);            $('.bgDescription',$this).stop(true,true).slideUp(700);        }    );});
　　
Articles you may be interested in

 

 
  
10 useful results in Web development [Source Code download]
 
  
Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
 
  
12 amazing creative 404 error page Designs
 
  
Let the website get started! 12 excellent jQuery animation plug-ins
 
  
Amazing 8 HTML5 & JavaScript Special Effects

 
 
Link to this article: Use jQuery and CSS3 to achieve an elegant accordion Effect

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

How to Use jquery
For download, go to the official website.

The latest version

Put it together with your js file.

Load it like other files.
<Script language = "javascript" src = "jquery. js"> </script>

How to call jQuery
This file is the Runtime Library of jquery and cannot be used without it. However, there is a simple answer. If your machine is always connected to the internet, replace this call with the following statement.
<Script src = "ajax.googleapis.com/..min.js" type = "text/javascript"> </script>