user2598957
user2598957

Reputation: 263

Randomly assign an image a value, then pass an animation

I'm looking to create an array with all my images in, I then want to assign a random image a value between 1 - 10. The value it ends up with will be a timed countdown in seconds until my Jquery animation is run. The code will then loop over and over, until the person leaves that page.

So I'm new to Jquery but I tried my best to get my head around so this is my image array, and my random selector;

var iconImgs = new Array('star','coffee','picture','code');
var max = iconImgs.length;
var num = Math.floor((Math.random() * max));

Then I need to select a random time between 1 - 10;

Math.floor((Math.random()*10)+1); 

This is the hard bit I need to take the image that was selected and the random time put those together and then run my animation (Note I DON'T want it to run onenter but its the only way I got it to work).

$(document).ready(function () {
$(".icon").mouseenter(function () {
    $(this).effect("bounce", {
        times: 1
    }, 400);
    });
});

I made a JSFiddle testing area - http://jsfiddle.net/UQTY2/167/

Upvotes: 0

Views: 120

Answers (2)

technophobia
technophobia

Reputation: 2629

Try this

var iconImgs = new Array('star','coffee','picture','code');
var max = iconImgs.length;
var times = Math.floor((Math.random()*10)+1);

$(document).ready(function () {

    setInterval(function () {
        var num = Math.floor((Math.random() * max));

        $("."+iconImgs[num]+"-icon").effect("bounce", {
            times: times
        }, 400);
    }, 400);

});

JSFIDDLE: http://jsfiddle.net/UQTY2/168/

Upvotes: 2

Raúl Juárez
Raúl Juárez

Reputation: 2159

First make sure your storing the random times in a variable:

var times=Math.floor((Math.random()*10)+1); 

Then in your function, instead of mouseenter just fire the effect:

$(document).ready(function () {
    $("."+iconImgs[num]+"-icon").effect("bounce", {
        times: times
    }, 400);
});

Upvotes: 1

Related Questions