<!doctype html> <html> <head> <meta charset="utf-8"> <title>面包导航切换动画效果</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .wrap { width:48px; height:30px; border:1px solid #ccc; position:relative; } span { height:2px; position:absolute; color:#484848; width:30px; margin:10px 10px; display:block; background:#484848; transition:.5s; } span:nth-child(2) { top:10px } .span1 { position:absolute; transform:rotate(-46deg); margin:15px 10px; height:2px; transition:.5s; } .span2 { position:absolute; transform:rotate(45deg); margin:5px 10px; height:2px; transition:.5s; } </style> </head> <body> <div class="wrap"> <span></span> <span></span> </div> <script> $(".wrap").click(function() { if (!$("span").eq(0).is('.span1')) { $("span").eq(0).addClass("span1"); $("span").eq(1).addClass("span2"); } else { $("span").eq(0).removeClass("span1"); $("span").eq(1).removeClass("span2"); } }); </script> </body> </html>
