Home/ Questions/Q 8398371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T21:02:26+00:00

This example http://jsfiddle.net/wCb93/1/ …appears to be what I need except my images are 137×109

  • 0

This example

http://jsfiddle.net/wCb93/1/

…appears to be what I need except my images are 137×109 (9 images). They need to fade in and out randomly continually without hover or mouse activation. The 3 x 3 setup is ideal for me so I think it just need a few tweaks. I have only ever worked in flash so this is completely new to me… so please be gentle!

The site is

http://www.incyteventures.com/index.html

As you can see not ideal… Any help would be greatly appreciated!

Regards
Les

Thanks Again 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    save this code as a *.js file (i modified it a little):

    $(function(){
    changeImg();
})

function changeImg(){
    var randomNumber = Math.floor(Math.random()*(9));
    var theImage = $('#container > img').eq(randomNumber);

    if (theImage.css("opacity")==0){
        theImage.delay(500).animate({
            opacity:1
        },250, function(){
            changeImg();
        });
    } else {
        theImage.delay(500).animate({
            opacity:0
        },250, function(){
            changeImg();
        });
    }
}

    your should look something like that:

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fancy_fade_outs</title>
<style type="text/css">
img {
    display: block;
    width: 137px;
    min-height: 109px;
    margin-right: 9px;
    margin-bottom: 9px;
    opacity:0;
    border: 0;
    float: left;
}

#container {
    width: 438px; /* =(image width + margin right)*3  */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- jquery on google-->
<script src="fadeScript.js"></script><!-- path to your script-->
</head>

<body>
<div id="container">
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" /><div style="clear: both;"></div>
</div>
​
</body>
</html>
    • 0