Add transition to images on my website

Question

I have this code:

<script type="text/javascript">
    var aImages = [ 
        "images/gaming/GTAV/GTAVReviewImage1.jpg",  
        "images/gaming/GTAV/GTAVReviewImage2.jpg",
        "images/gaming/GTAV/GTAVReviewImage3.jpg",
        "images/gaming/GTAV/GTAVReviewImage4.jpg",
        "images/gaming/GTAV/GTAVReviewImage5.jpg",
        "images/gaming/GTAV/GTAVReviewImage6.jpg",
        "images/gaming/GTAV/GTAVReviewImage7.jpg"];
    var oImage   =  null;  
    var iIdx     =  0;  
    function play() {
        try {
        if (oImage===null) { oImage=window.document.getElementById("review-images"); }
        oImage.src  =  aImages[(++iIdx)%(aImages.length)];  
        setTimeout('play()',5000);  
        } catch(oEx) {
    }
}
</script>

which changes the image on this page: http://chrisbrighton.co.uk/GTAV.php every five seconds.

How can I add image transition to it?

UPDATE: When I add -webkit-transition to the img tag nothing happens.

Thanks.

Please Google first before asking on SO. Searching "image transition css" should give plenty examples. — Bas van Dijk, Dec 20 '13 at 19:53
possible duplicate of [JavaScript animation](http://stackoverflow.com/questions/11213259/javascript-animation) — JayD, Dec 20 '13 at 19:57
When you added -webkit-transition to the image, you did this in CSS? And what browser did you test with? — Charlie74, Dec 20 '13 at 20:07
@Charlie74 I did, yes. I've used it before but I'm guessing it doesn't work because I have this piece of JavaScript code. I tested it in Chrome. — Chris, Dec 20 '13 at 20:11

score 0 · Answer 1 · answered Dec 20 '13 at 19:55

0

There are different ways to do it. A lot of people have went to CSS3 now that there is some really cool animating and transition effects... You can control your ccs3 effects using javascript. For a detailed tutorial check - controlling animations with javascript

answered Dec 20 '13 at 19:55

JayD

6,173
4
20
24

Flagged - duplicate question – JayD Dec 20 '13 at 19:57

Add transition to images on my website

1 Answers1