Jquery animation animate-CodePudding

Question 1
Div. The animate ({
Width: '0%',
Width: '100%'
})
I want to be executed multiple times from 0 100, not from 0 after 100, 100 to 0, and then the effect of from 0 to 100

Question 2
After the last animation effects from 0 to 100, I in order to achieve the 0 to 100, many times just after want to div width to 100 set to 0
Just wrote a div. CSS (' width ', '0%'); How does not work or

CodePudding user response:

 
 
 
<meta charset="utf-8"/& gt; 
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt; 
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt; 
 The name of the page & lt;/title> <br/><The script type="text/javascript" SRC="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" & gt; </script> <br/><style type="text/CSS" & gt; <br/># div {<br/>Height: 50 px; <br/>background-color: #f00; <br/>} <br/></style> <br/></head> <br/><body> <br/><Div id="div" & gt; </div> <br/><The script type="text/javascript" & gt; <br/>The function fun () {<br/>$(" # div "). The CSS ({<br/>Width: '0%' <br/>}). The animate ({<br/>Width: '100%' <br/>}, 2000, fun); <br/>} <br/>Fun (); <br/></script> <br/></body> <br/></html> </pre>           </div>
          <div class="th_page th_page_color"></div>
          <div class="umCopyright">
            <p>Page link：<a href="/frontend/96522.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/96522.html</a></p>
          </div>
          <div class="detail-arr">
               <div class="detail-arr-left">Prev:<a href='/frontend/96521.html'>Two of nested iframe page request without solution</a></div>
               <div class="detail-arr-right">Next:<a href='/frontend/96523.html'>Turn to help have a look at the great god, the JSP page foreach no output, what reason be</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container th_top">
    <div class="row">
      <div class="col-md-12">
        <div class="hot-tags neitags">
          <ul>
            <li><i class="iconfont icon-x-tags"></i> Tags：  </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a>               </ul>
        </div>
      </div>
    </div>
  </div>
 <div class="container th_top">
    <div class="row">
      <div class="col-md-12">
        <div class="xiangguan">
        	<ul class="msg msghead">
            	<li class="tbname">Related</li>
            </ul>
          <ul>             </ul>
        </div>
      </div>
    </div>
  </div>
<div class="container th_top">
  <div class="row">
    <div class="col-md-12">
      <div class="flinks">
        <ul>
          <li><i class="iconfont icon-x-tags"></i> Links：  </li>
          <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>

            </ul>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>          <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
  <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script> 
</body></html>