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!!



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(){
     $('#content').html(" " + quotes[randomQuote].quoteText);

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.