Fade element out and fade in data from Array - jQuery

Question

I have 4 div items on my page, I'm trying to get the inner html of these items to fade out randomly, take a row from an array and fade that in - in its place, does this make sense?

// My items that I would like to repopulate the faded out info

var testimonialsArray = [
    "<div class='change'><h1>Box 5</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 6</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 7</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 8</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 9</h1><p>Lorem ipsum</p></div>" 
];

// Find a random div and fade it out

var order = Math.floor((Math.random()* $('.change').length )+1);

$('.box').eq(order).find('.change').fadeOut();

.......Fade in new data from an array row

http://jsfiddle.net/crn7dysu/1/

So, aside from the 0 index problem, what is your actual problem? You do not actually say what is not working the way you want. — iCollect.it Ltd
– iCollect.it Ltd, Commented May 12, 2015 at 10:20
You mean something like: $('.box').fadeOut(500).html( getRandomDiv() ).fadeIn(500); ? — Yogi
– Yogi, Commented May 12, 2015 at 10:26

iCollect.it Ltd · Accepted Answer · 2015-05-12 10:24:11Z

2

Based on what I think you wanted to do:

var order = Math.floor((Math.random()* $('.change').length ));

$('.box').eq(order).find('.change').fadeOut(function(){
   $(this).html(testimonialsArray[Math.floor((Math.random()* testimonialsArray.length))]).fadeIn();
});

JSFiddle: http://jsfiddle.net/crn7dysu/4/

answered May 12, 2015 at 10:24

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GreyRoofPigeon · Accepted Answer · 2015-05-12 10:28:33Z

0

You could use this script:

var testimonialsArray = [
    "<div class='change'><h1>Box 5</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 6</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 7</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 8</h1><p>Lorem ipsum</p></div>", 
    "<div class='change'><h1>Box 9</h1><p>Lorem ipsum</p></div>" 
];

var order = Math.floor((Math.random()* $('.box').length )+1);
var newOrder = Math.floor((Math.random()* testimonialsArray.length ));

$('.box:nth-child('+order+')').find(".change").fadeOut( function() {
    $(testimonialsArray[newOrder]).appendTo('.box:nth-child('+order+')').hide().fadeIn('slow');
});

Updated Fiddle

answered May 12, 2015 at 10:28

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Constructing a string selector, just to use :nth-child, seems a little wasteful don't you think? The original code was shorter/faster (but just had an incorrect +1 index).

SharpEdge · Accepted Answer · 2015-05-12 10:40:31Z

0

Suppose you get 0 from Math.random() and that $('.change').length is 10

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

You can see that this code will never generate 0 as output.

This one instead will generate all the possible combinations:

Math.floor(Math.random()* $('.change').length);

edited May 12, 2015 at 10:40

answered May 12, 2015 at 10:18

SharpEdge

1,7621 gold badge10 silver badges20 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

The +1 was certainly wrong, but length-1 is also incorrect as Math.random returns "up to but not including 1 (exclusive)" so never hits the length value.

Collectives™ on Stack Overflow

Fade element out and fade in data from Array - jQuery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related