Question

请你看一下这个演示，让我知道如何正确地将动画添加到边框，这样当使用a点击时，所有以前的边框会在anime100之后获得anime100类一个序列

现在正在发生的是同时向所有动漫类添加$("a:eq( 1 )").on("click", function() { $('.anime:eq( 0 )').addClass('anime100'); }); $("a:eq( 2 )").on("click", function() { $('.anime:eq( 0 )').addClass('anime100'); $('.anime:eq( 1 )').addClass('anime100'); }); $("a:eq( 3 )").on("click", function() { $('.anime:eq( 0 )').addClass('anime100'); $('.anime:eq( 1 )').addClass('anime100'); $('.anime:eq( 2 )').addClass('anime100'); }); $("a:eq( 4 )").on("click", function() { $('.anime:eq( 0 )').addClass('anime100'); $('.anime:eq( 1 )').addClass('anime100'); $('.anime:eq( 2 )').addClass('anime100'); $('.anime:eq( 3 )').addClass('anime100'); }); $("a:eq( 5 )").on("click", function() { $('.anime:eq( 0 )').addClass('anime100'); $('.anime:eq( 1 )').addClass('anime100'); $('.anime:eq( 2 )').addClass('anime100'); $('.anime:eq( 3 )').addClass('anime100'); $('.anime:eq( 4 )').addClass('anime100'); });！

＆＃13;

.anime {
  height: 10px;
  width: 0px;
  background: gold;
  transition: all 0.7s;
}

.anime100 {
  width: 250px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="">
  <li>
    <div class="box">
      <div class="left"><a href="#">A</a></div>
      <div class="anime"></div>
    </div>

  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">B</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">C</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">D</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">E</a></div>
      <div class="anime"></div>
    </div>
  </li>
  <li>
    <div class="box">
      <div class="left"><a href="#">F</a></div>
      <div class="anime"></div>
    </div>
  </li>

＆＃13;

import urllib.request
from urllib.error import URLError # the docs say this is the base error you need to catch
for i in range(0,1000):
    issue_id1='DERBY-'+str(i)
    url ="https://issues.apache.org/jira/si/jira.issueviews:issue-xml/"+issue_id1+'/'+issue_id1+'.xml'
    try:
        s=urllib.request.urlopen(url)
        contents = s.read()
    except URLError:
        print('an error occurred while fetching: "{}"'.format(url))
        continue # skip this url and proceed to the next
    file = open(issue_id1+'.xml', 'wb')
    file.write(contents)

＆＃13;

Answer 1

您可以通过循环浏览元素并使用.delay()，.queue()和.dequeue()的组合来缩小此代码，执行以下操作：

JS Fiddle

var startEq = 0; // Start at 0 (first element)

$("a").on("click", function() {
  var maxEq = $('li').has(this).index(); // Current clicked element's parent index

  $('.anime').each(function(i) {

    if (startEq >= maxEq) {
      return; // Stop loop once current target is reached
    }

    $('.anime:eq(' + startEq + ')').delay(200 * i).queue(function() {
      $(this).addClass('anime100').dequeue();
    });

    startEq += 1; // Add 1 after each loop 
  });
});

关于Animate边界的jQuery问题直到选定的元素由sequent

1 个答案: