asp中项目的淡入淡出效果：Repeater

Question

我正在使用 Asp:Repeater 来显示数据库中的项目。我想一个接一个地淡入和淡出转发器中的每个项目。我之前使用过 jQuery Ticker 插件，但它不起作用。

       $(function () {
        $('#fader').fadeIn('slow', function () {
            alert('t');
            fadeItOut();
        });
    });

    function fadeItIn() {
        $('#fader').fadeIn('slow', function () {
            fadeItOut();
        });
    }

    function fadeItOut() {
        $('#fader').fadeOut('slow', function () {
            fadeItIn();
        });
    }



});

我使用了上面的代码，推子是为转发器的标头模板提供的 id。它的作用是：它显示转发器中的所有项目并淡入和淡出。我需要的是一个接一个地连续淡入和淡出每个项目......任何帮助将不胜感激！谢谢！

<ItemTemplate>

    <div id="fader" style=" background-color: lightyellow; overflow: hidden; padding-top:100px; padding-left:100px">
        <div style="display: block; width: 40%; height:100%; float: left; position: relative">
            <h4><%# Eval("title") %></h4>
            <p><%# Item.Description %></p>
        </div>

    </div>

</ItemTemplate>

Answer 1

使用类“fader”而不是 id 并循环遍历所有元素。并避免使用内联样式。

 <div class="fader" style="display: none; background-color: lightyellow; overflow: hidden; padding-top:100px; padding-left:100px">
        <div style="display: block; width: 40%; height:100%; float: left; position: relative">
            <h4><%# Eval("title") %></h4>
            <p><%# Item.Description %></p>
        </div>

$(document).ready(function() {
  var time = 1000;
  (function loop(){
    $('.fader').each(function () {
        var $self = $(this);
        setTimeout(function () {
            $self.fadeIn('slow').fadeOut();
        }, time);
        time += 1500;
    });
    loop();
  })();
});