JQuery 淡入淡出股票整洁

发布于 2024-10-25 19:20:50 字数 461 浏览 1 评论 0原文

正在尝试我自己的股票代码,并且已经用完了 JQuery 知识。这些元素应该淡出,然后下一个元素淡入。此时,第一个元素淡出,而第二个和第三个元素一起淡入,并且它们没有循环。显然我错过了一些东西。

<script type="text/javascript">
var elem1 = $('#fader').children();
    $(elem1).hide();
    $(elem1).first().fadeIn(2000,function(){
        $(elem1).delay(4000);

        $(elem1).fadeOut(2000, function(){
            $(elem1).next().fadeIn(2000);

            });
            }); </script>

有什么想法吗?

奇妙

Experimenting with my own ticker and have run out of JQuery knowledge. The elements are supposed to fade out then the next one fades in. At the moment the first element fades out whilst the second and third fade in together and their is no loop. Obviously I have missed something.

<script type="text/javascript">
var elem1 = $('#fader').children();
    $(elem1).hide();
    $(elem1).first().fadeIn(2000,function(){
        $(elem1).delay(4000);

        $(elem1).fadeOut(2000, function(){
            $(elem1).next().fadeIn(2000);

            });
            }); </script>

Any ideas?

Marvellous

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

转身泪倾城 2024-11-01 19:20:50

好吧,我做了一个简单的修补程序,可以滚动所有值并停止。也许这就是您正在寻找的东西,或者至少可以帮助您构建自己的东西。 ;)
这是它的 HTML 代码:

<div id="fader" style="width:100px; height:100px; background-color:blue;">
    <p>aaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbb</p>
    <p>cccccccccccc</p>
    <p style="display:none;">dddddddddddd</p>
    <p style="display:none;">eeeeeeeeeeee</p>
    <p style="display:none;">ffffffffffff</p>
    <p style="display:none;">gggggggggggg</p>
</div>

脚本本身:

<script type="text/javascript">
$(document).ready(function()
{
    var timer = window.setInterval(function()
    {
        var elem1 = $('#fader').children(':visible:first');
        var elem2 = $('#fader').children(':visible:last');

        if( !$(elem2).next().is(':last') )
            clearInterval( timer );
        else
        {
            $(elem1).fadeOut(1500, function()
            {
                $(elem2).next().fadeIn(1500);
            });
        }
    }, 3000);
});
</script>

祝你好运! ;D

Well, I made a simple tinker that scrolls all the values and stop. Maybe it's what you're looking for, or, at least, can help you build yours. ;)
Here is it's HTML code:

<div id="fader" style="width:100px; height:100px; background-color:blue;">
    <p>aaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbb</p>
    <p>cccccccccccc</p>
    <p style="display:none;">dddddddddddd</p>
    <p style="display:none;">eeeeeeeeeeee</p>
    <p style="display:none;">ffffffffffff</p>
    <p style="display:none;">gggggggggggg</p>
</div>

The script itself:

<script type="text/javascript">
$(document).ready(function()
{
    var timer = window.setInterval(function()
    {
        var elem1 = $('#fader').children(':visible:first');
        var elem2 = $('#fader').children(':visible:last');

        if( !$(elem2).next().is(':last') )
            clearInterval( timer );
        else
        {
            $(elem1).fadeOut(1500, function()
            {
                $(elem2).next().fadeIn(1500);
            });
        }
    }, 3000);
});
</script>

Good luck! ;D

最冷一天 2024-11-01 19:20:50

我认为这是你的选择器。 $(elem1) 引用 $('#fader') 的所有子级,因此 $(elem1).next()最终将引用所有可能的“下一个”,在这种情况下,第一个和第二个元素具有“下一个”,分别是第二个和第三个元素。

您想要做的是以某种方式跟踪当前显示的元素,然后在时间到时淡出该元素并淡入该元素的下一个元素。

I think it's your selector. $(elem1) is referring to all of the children of $('#fader'), therefore $(elem1).next() would end up referring to all of the possible "next's", which in this case, the first and second element have "next's", being the second and third elements, respectively.

What you want to do is to somehow keep track of which element is the currently shown one, and then when its time, fade that one out and the next one of THAT element in.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文