Search code examples
jqueryhtmlfade

Div data swap on fixed time interval


I have been trying to spoof something i saw in this link check this link. what i need is the changing div there. i want to recreate the changing effect. if possible like with words swapping in a matrix way. checked jquery innerfade but not working. can anyone help?

what i have already have

$(document).ready(
    function(){
        $('.changer1').innerfade({
            animationtype: 'slide',
            speed: 750,
            timeout: 2000,
            type: 'random',
            containerheight: '1em'
        });

        $('.changer2').innerfade({
            speed: 'slow',
            timeout: 4000,
            type: 'sequence',
            containerheight: '220px'
        });

        $('.changer3').innerfade({
            speed: 'slow',
            timeout: 1000,
            type: 'sequence',
            containerheight: '1.5em'
        });
    }

and my html :

<div class='changer1'>
    <p> Web Maker </p>
</div>
<div class='changer2'> 
    <p> Windows Phone Dev</p>
</div> 
<div class='changer3'>
    <p> Reverse Engineer</p>
</div>
<div class='changer4'>
    <p> UI/UX Lover </p>
</div> 
<div class='changer5'>
    <p> Geek</p>
</div>
<div class='changer6'>
    <p> Human </p>
</div>

Solution

  • $(document).ready(
        function(){
            $('.changer1').innerfade({
                animationtype: 'slide',
                speed: 750,
                timeout: 2000,
                type: 'random',
                containerheight: '1em'
            });
    });
    

    html

    <div class='changer1'>
        <p> Web Maker </p>
    
        <p> Windows Phone Dev</p>
    
        <p> Reverse Engineer</p>
    
        <p> UI/UX Lover </p>
    
        <p> Geek</p>
    
        <p> Human </p>
    </div>