在asp:Repeater中淡出淡出效果

时间:2013-07-29 15:48:17

标签: jquery asp.net fadein asprepeater fadeout

我正在使用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>

1 个答案:

答案 0 :(得分:0)

使用类“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();
  })();
});