jQuery腾讯肌肤缺水指数测试

群里有人分享出来的肌肤测试效果。

淘建站为您提供更多_其它特效_jQuery插件_qq_测试，在此特别感谢您对我们的支持与厚爱！

HTML

<div class="tc_wt_box six"> 
     <h2>你的工作是咩？</h2> 
     <ul> 
      <li class="one" bcolor="yellow">学生党</li> 
      <li class="two" bcolor="red">苦逼<br />加班族</li> 
      <li class="two" bcolor="yellow">个体<br />老板</li> 
      <li class="one" bcolor="yellow">家庭主妇</li> 
      <li class="one" bcolor="blue">自由人</li> 
      <li class="one" bcolor="orange">上班族</li> 
     </ul> 
    </div> 
    <div class="tc_wt_box sev"> 
     <h2>如果不是萌妹子，那你是？</h2> 
     <ul> 
      <li class="one" bcolor="red">女汉子</li> 
      <li class="one" bcolor="orange">女强人</li> 
      <li class="one" bcolor="blue">白富美</li> 
      <li class="one" bcolor="yellow">文艺控</li> 
      <li class="one ml" bcolor="orange">女屌丝</li> 
      <li class="one" bcolor="yellow">萌妹子</li> 
      <li class="one" bcolor="blue">小清新</li> 
     </ul> 
</div>

引入jQuery库、测试css和js

<link type="text/css" href="style/css/page.css" rel="stylesheet" />
<script type="text/javascript" src="style/js/jquery.js"></script> 
<script type="text/javascript" src="style/js/test.js"></script

js/test.js

//问题答案点击
function change(now) {
    $('.test .tc_wt_box').eq(now).show().find('h2').animate({
        'margin-top': '150px',
        'opacity': '1'
    },
    600,
    function() {
        $('.test .tc_wt_box').eq(now).find('li').each(function(i) {
            $(this).delay(i * 100).fadeIn(350);
        });
    });
}