<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <style type="text/css"> .test { height: 100px; width: 100px; background: green; display: none; float: left; margin-right: 10px; } </style> </head> <body> <div class="test">你</div> <div class="test">好</div> <div class="test">啊</div> <div class="test">哈</div> <button class="show">show</button> <button class="hide">hide</button> <script type="text/javascript"> $(function(){ $('.show').on('click',function(){ $('.test').first().show('fast',function showBox(){ $(this).next().show('fast',showBox); }) }) $('.hide').on('click',function(){ $('.test').last().hide('fast',function hideBox(){ $(this).prev().hide('fast',hideBox); }) }) }) </script> </body> </html>