<!DOCTYPE html>
<html><head> <meta name="viewport" content="width=device-width" /> <title></title> <link href="~/Areas/CSSJquery/CSS/AccordionDemo.css" rel="stylesheet" /> <script src="~/Areas/CssJquery/JS/AccordionDemo.js"></script></head><body> <div > <ul> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s1.jpg)"> <div class="uldiv" > <p>秋意漸，劍風涼，池邊蕭蕭木。</p> <p>相思楚，鄉關暮，夜深誰與渡。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s2.jpg)"> <div class="uldiv"> <p>百花競妍梅自孤，</p> <p>品高何須同入俗。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s3.jpg)"> <div class="uldiv"> <p>待到飛雪舞青城，</p> <p>枝枝瓣瓣見風骨。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s4.jpg)"> <div class="uldiv"> <p>秋意漸，劍風涼，池邊蕭蕭木。</p> <p>相思楚，鄉關暮，夜深誰與渡。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s5.jpg)"> <div class="uldiv"> <p>秋意漸，劍風涼，池邊蕭蕭木。</p> <p>相思楚，鄉關暮，夜深誰與渡。</p> </div> </li> </ul> </div></body></html>
js----------------------------------------------------------------------------------
$(function () { $(".li").click(function () { $(this).siblings(".li").stop(true, true); $(this).siblings(".li").animate({ 'width': '100px' }, 500); $(this).animate({ 'width': '740px' }, 1000); })})
新聞熱點
疑難解答
