jquery特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

2. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

3. HTML代码

<div id="content">
  <div class="title"></div>
  <div class="navigation" id="nav">
    <div class="item user"> <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>User</h2>
      <ul>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Properties</a></li>
        <li><a href="#">Privacy</a></li>
      </ul>
    </div>
    <div class="item home"> <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>Home</h2>
      <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="item shop"> <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>Shop</h2>
      <ul>
        <li><a href="#">Catalogue</a></li>
        <li><a href="#">Orders</a></li>
        <li><a href="#">Offers</a></li>
      </ul>
    </div>
    <div class="item camera"> <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>Photos</h2>
      <ul>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Prints</a></li>
        <li><a href="#">Submit</a></li>
      </ul>
    </div>
    <div class="item fav"> <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a>
      <h2>Love</h2>
      <ul>
        <li><a href="#">Social</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Comments</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
            $(function() {
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'top'       :'-25px',
                        'left'      :'-25px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                    });
                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');
                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>