<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <title>手风琴效果</title> <style> ul , h2 { padding:0; margin:0; } li { list-style:none; } body{} .sfq{300px; height: 200px; float: left; } .red{ background-color: red; } .green{ background-color: green; } .yellow{ background-color: yellow; } .blue{ background-color:blue; } .orange{ background-color: orange; } </style> <script type="text/javascript"> $(function(){ $('.sfq').mouseover(function(){ $(this).stop().animate({300},500).siblings().stop().animate({30},500) }) }) </script> </head> <body> <div class="sfq red"></div> <div class="sfq green"></div> <div class="sfq yellow"></div> <div class="sfq blue"></div> <div class="sfq orange"></div> </body> </html>