fadein一个div jquery

时间:2014-10-25 18:36:23

标签: javascript jquery fadein

如何为这段代码添加更多ptag2,ptag3,...当添加更多div时,它会在一个div和Times中显示所有内容并且不显示Show 我的代码:

    <div class="latest_news">
    <strong>Latest<br>news</strong>

    <div id="ptag1">
    There are many variations of passages of Lorem Ipsum available, but the <a href="#">majority 
</div>
<div id="ptag2">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
</div>

jquery代码:

我添加更多div并在jquery代码中设置:

<script type="text/javascript">
    $(document).ready(function () {
        setTimeFor2Hide();
    });

    function setTimeFor1Hide() {
        setTimeout("$('#ptag1').fadeIn(500)", 1200);
        setTimeout("$('#ptag2').fadeOut(500)", 700);
        setTimeout("setTimeFor2Hide();", 5000);
    }

    function setTimeFor2Hide() {
        setTimeout("$('#ptag1').fadeOut(500)", 700);
        setTimeout("$('#ptag2').fadeIn(500)", 1200);
        setTimeout("setTimeFor1Hide();", 5000);
    }


</script>

我添加了更多div和settimeout:

        <div id="ptag3">
    3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys <a href="#">standard dummy text</a> ever since the 1500s, when an unknown printer.
</div>
    <div id="ptag4">
    4Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys <a href="#">standard dummy text</a> ever since the 1500s, when an unknown printer.
</div> and more...
        function setTimeFor1Hide() {
        setTimeout("$('#ptag1').fadeIn(500)", 1200);
        setTimeout("$('#ptag2').fadeOut(500)", 700);
        setTimeout("$('#ptag3').fadeOut(500)", 600);
        setTimeout("$('#ptag4').fadeOut(500)", 500);
function setTimeFor2Hide() {
        setTimeout("$('#ptag1').fadeOut(500)", 700);
        setTimeout("$('#ptag2').fadeIn(500)", 1200);
        setTimeout("$('#ptag3').fadeIn(500)", 1100);
        setTimeout("$('#ptag4').fadeIn(500)", 1000);

不能正常工作

1 个答案:

答案 0 :(得分:0)

Something like this

function setTimeFor1Hide ()
{
    setTimeout(hide1, 1500);

    setTimeout(setTimeFor2Hide, 5000);
}

function setTimeFor2Hide() {
    setTimeout(hide2, 1500);

    setTimeout(setTimeFor1Hide, 5000);
}

function hide1() {
   $('div[id^="ptag"]').fadeOut(500);
   $('#ptag1').fadeIn(500);
}

function hide2() {
   $('div[id^="ptag"]').fadeIn(500);
   $('#ptag1').fadeOut(500);
}