<!DOCTYPE html> <html> <head> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> .has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; } li { background: #ccc; border: 1px #000 solid; display: block; padding: 2px; margin-left: 0; margin-top: 4px; margin-bottom: 4px; } </style> </head> <body> <p>第一种情况)</p> <ul class="example-1"> <li class="has-transition">1</li> <li class="has-transition">2</li> <li class="has-transition">3</li> <li class="has-transition">4</li> <li class="has-transition">5</li> </ul> <p>第二种情况)</p> <ul class="example-2"> <li class="has-transition">1</li> <li class="has-transition">2</li> <li class="has-transition">3</li> <li class="has-transition">4</li> <li class="has-transition">5</li> </ul> <script type="text/javascript"> $('.example-1 li').click(function () { $(this).removeClass('has-transition'); $(this).css('margin-left', 100); $(this).addClass('has-transition'); $(this).css('margin-left', 50); }); $('.example-2 li').click(function () { $(this).removeClass('has-transition'); $(this).css('margin-left', 100); $(this)[0].offsetHeight; // 强制执行重排，确保设置的100px能够生效 $(this).addClass('has-transition'); $(this).css('margin-left', 50); }); </script> </body> </html>