Question

Good Morning,

I have copied this code from somewere

<script type="text/javascript">
    $(function() {
    setInterval("rotateImages()", 200);
    });

    function rotateImages() {
        var oCurPhoto = $('#lb2Animate div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0) 
        oNxtPhoto = $('#lb2Animate div:first');
        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 300,
            function() {
                oCurPhoto.removeClass('previous');
            });
}

</script>
<style type="text/css">


#lb2Animate {
position:relative;
float:left;
height:126px;
width:131px;
margin-left: auto;
}
#lb2Animate div {
position:absolute;
z-index: 0;
}
#lb2Animate div.previous {
z-index: 1;
}
#lb2Animate div.current {
z-index: 2;
}

</style>

What i need to do is to move from animate to fadeIn
i need to change the animate in here:

oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 300,
            function() {
                oCurPhoto.removeClass('previous');
            });

Can i get any help

im not so familiar with jQuery

Thanks in advance.
good day

Answer 1

Change

oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 300,
    function() {
        oCurPhoto.removeClass('previous');
});

to

oNxtPhoto.css({ opacity: 0.0 }).addClass('current').fadeIn(300, function() {
    oNxtPhoto.removeClass('previous');
});

I would look at refactoring that further, perhaps look at the jQuery Docs or some of the tutorials on the jQuery website to get started. It isn’t much of a learning curve, especially if you are familiar with Javascript.

---

Edit: It won’t work just by changing it to fadeIn, because that won’t affect the opacity css change. You might want to change it to:

oNxtPhoto.hide().addClass('current').fadeIn(300, function() {
    oNxtPhoto.removeClass('previous');
});

DEMO: http://jsfiddle.net/FsRSQ/1/