JQuery Sliding每个具有以“F”开头且具有延迟的id的元素

时间:2013-07-29 20:14:21

标签: jquery selector delay each

我有几个<div>我希望使用JQuery进行动画制作。我需要显示第一个<div>,持续7秒。然后向下滑动并显示下一个<div>,持续7秒。

以下是计算我<div>的HTML代码:

<?php 
header('Content-Type: text/html; charset=UTF-8');
?>
<div id='F1' class='Nouvelles' style='background- image:url(../ImagesAnnonces/google_chrome.png); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='E2' class='Nouvelles' style='background-image:url(../ImagesAnnonces/images.jpeg); background-size:contain;'>
    <h2>test</h2>
    <p>test</p>
</div>
<div id='F3' class='Nouvelles' style='background-image:url(../ImagesAnnonces/); background-size:contain;'>
    <h2>test 2 FR</h2>
    <p></p>
</div>

为此,我尝试了以下代码:

$(document).ready
        (function(){
            $.ajax(
            {
                url:"handlingPub.php",
                type:"GET",
                dataType:"text",
                contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                success:function(code_html, status)//code_html contains all the `<div>`
                            {
                                $("#divPub").append(code_html);
                                $(".Nouvelles").css(
                                    {
                                        height:"90px",
                                        display:"none",
                                        padding:"0px",
                                        margin:"10px",
                                        overflow:"hidden",
                                        border:"solid white 2px"
                                    });
                                $('.Nouvelles[id^="F"]:lt(1)').css("display", "block");
                                $(".Nouvelles h2").css({padding:"0px", margin:"0px"});
                            } 
            });


            function()
            {
                $('.Nouvelles[id^="F"]').each(function()
                    {
                        $(this).slideUp().delay(7000);
                        if($(this).next() != null)
                        {
                            $(this).next().slideDown();
                        }
                    });

            }
        });

现在问题是: 第一个<div>正确显示。 但是我无法进入$('.Nouvelles[id^="F"]').each(function(){//I cant get here}); 而且我不知道为什么。可能有一点我犯了错误?

OH!顺便说一下,我只需<div> id 'F'开头{{1}} 所以只有F1和F3不是E2。

非常感谢!

1 个答案:

答案 0 :(得分:1)

$('.Nouvelles[id^="F"]').each调用是在函数内部进行的,您似乎没有调用它。在这种情况下,您需要执行您想要执行的操作,而不是创建执行此操作的功能。摆脱function() {电话周围的}each,看看是否有帮助。