Question

我有3个部分，想通过jQuery一个一个地展示它们，我不知道怎么做？

JQUERY

$ infos = $（＆＃34;＃ex-2＆＃34;）。find（＆＃39; section＆＃39;）。hide（），

HTML

<div class="ex">
  <article>
    <section>
      <font style="background-color:#000000"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </font>
    </section>
    <section>
      <font style="background-color:#000000"> testing testing </font>
    </section>
    <section>
      <font style="background-color:#000000">testing 2</font>
    </section>
  </article>
</div>

任何帮助？

Answer 1

问题不明确/完整。通过猜测，我可以建议你jQuery Cycle Plugin

添加循环插件后，只需输入：

即可调用它

$(document).ready(function(){
  $('article').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
  });
})

Answer 2

首先，您的容器div有一个类，而不是ID，因此您需要选择".ex"而不是"#ex-2"。然后尝试这样的事情：

$(document).ready(function() {
    var $infos = $(".ex").find('section').hide(),
        i = 0;

    function showOneByOne(){
        if (i < $infos.length)
            $infos.eq(i).fadeIn(500, showOneByOne);
        i++;
    }
    showOneByOne();
});

演示：http://jsfiddle.net/A2Nbu/

如果“一个一个地显示它们”意味着显示一个，然后隐藏它并显示下一个，并且无限期地继续前进，那么对上面的一个小修改将会这样做：

$(document).ready(function() {
    var $infos = $(".ex").find('section').hide(),
        i = 0;

    function showOneByOne(){
        $infos.eq(i).fadeIn(500).fadeOut(100, showOneByOne);
        i = (i + 1) % $infos.length;      
    }
    showOneByOne();
});

演示：http://jsfiddle.net/A2Nbu/2/

无论哪种方式，想法都是从隐藏的部分开始，然后使用索引变量i逐个循环。

有关我使用的jQuery方法的详细信息，请访问jQuery API reference site。

jQuery查询

2 个答案: