fadein a div jquery

Question

how can add more ptag2,ptag3,... to this code,When add more div it display all in one div and Times and unsettles the Show my code :

    <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 code :

I add more div and set in jquery code :

<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>

I add more div and 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);

Not working properly

Igor Semin · Accepted Answer · 2014-10-26T08:08:11.397

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);
}

edited Oct 26 '14 at 08:08

answered Oct 25 '14 at 18:44

Igor Semin

2,486
1
20
21

Thanks,but how I can add more ptag3,ptag4,ptag5... ?http://jsfiddle.net/kj5eft82/ – lock Oct 25 '14 at 20:31
oh, sorry, i have misunderstood - use "^=" for searching elements by attribute. This solution - http://jsfiddle.net/kj5eft82/1/ – Igor Semin Oct 26 '14 at 08:06
not working:(,ptag3 display with ptag2 ,I need preg3 link preg 1 and 2 only show preg3 after it preg4 and reload preg1 and... – lock Oct 26 '14 at 17:22
http://jsfiddle.net/kj5eft82/2/? Show me plz your logic by example, i don't understand what you want. In your example i see 1 in + N out, and 1 out + N in. – Igor Semin Oct 26 '14 at 20:22
Thank you.I wanted the same thing – lock Oct 27 '14 at 14:05

fadein a div jquery

1 Answers1