Search code examples
javascriptjqueryfadein

fadein a div jquery


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


Solution

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