Random quote machine --help required to create cross fade

Hi guys,

Firstly, this project is technically done. I have to make it responsive and add tweet functionality. However , I would love to be able to make the images and quotes cross fade in and out. I’ve searched and tried a few options but I’ve taken ages to get to this point and I don’t want to screw it up. Can anybody take a look at my code and see if there is a simple way to accomplish this. I’ll link to the posted web page as I’ve got it on my own hosting. Great project!!

thanks!!

LINK:
http://www.barrygillespie.co.uk/randomquotes/quote.html

Hey. Since you’re using jQuery, you can make use of its animations’ complete callbacks.

Something like this:

//random new quote function
function getQuote(){
  var randomQuote = Math.floor(Math.random() * (quotes.length));
  $('#author, #content, .hero').fadeOut(function(){
     $('#author').text(quotes[randomQuote].quoteAuthor);
     $('#content').html(" " + quotes[randomQuote].quoteText);
     $('.hero').attr('src',quotes[randomQuote].imgSrc);
  }).fadeIn();
}

This is just a basic example but it should work. The .animate() method has a complete callback as well, if you wish to add more complex animations.

As I understand it the callback fires a function when then first method has completed (fadeIn) is that right? Thanks. I also didn’t know that multiple elements can be targeted at once on the same event. I’m also planning a random color array to fire at the same time to change the panel color.

Also if anybody else reads this…​I’m having trouble with positioning the button. I want it under the quote, but not moving along with the panel when it’s set to auto height. As a workaround I’ve set it fixed and adjusted the height of the panel which is fine. But this goes wrong in landscape mode and for smaller screens. I haven’t done the responsive code yet but I’m wondering what the best way to achieve this is. I want the button clear of the quote.

Is this something to do with clear :both…?

Thanks noyb for the animation tip. It works. I had to set the times different for fadeOut and fadeIn to make it look right. On first load however it’s a bit glitchy until it’s cached. Is there a way to force the images to cache before the code runs. I’ve got the images compressed as much as possible. I’m wondering if I put them in the html but hidden that could force them to download before they are called by the jquery click event… Any thoughts?
Also I will have to add more objects to the array as repeats are an issue. Although there are workarounds to duplicate random numbers.