1

I have a script that rotates between an array of preloaded images at a set interval to change the background image. I'm using transitions (transition: background-image 2s ease) to make the rotation crossfade, but this is currently only supported in Chrome.

I can modify the script using jQuery to animate the element to fade out, change the source and then fade back in, but enabling this script overrides Chrome's behaviour. As a side/alternate question, is it possible to emulate crossfading using jQuery?

How can I allow Chrome to use the CSS transition and force all other browsers to use the jQuery animation?

I am using Modernizr, but I don't think the feature detection would work as most other modern browsers get the csstransitions class even if they don't support certain specific transitions like background-image, but I would be happy if someone could prove me wrong.

Bobe
  • 2,040
  • 8
  • 29
  • 49
  • U can use navigator object to find if the client is chrome browser ad put your code under the condition. – Ravi Soni Mar 07 '13 at 08:12

1 Answers1

1

U can use navigator object to find if the client is chrome browser ad put your code under the condition.

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
if($.browser.chrome){
/*code for chrome browser*/

}
else{
/*code for other browser*/
}

hope this help

Ravi Soni
  • 2,210
  • 3
  • 31
  • 53
  • I like this approach. The first line's using a regular expression, in case you're wondering about the wonky syntax. https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions – Zach Rattner Mar 07 '13 at 08:15
  • I'm not sure how elegant this is, but I used your code as a framework and instead added a PHP check at the bottom of my index.php file as described in this question: http://stackoverflow.com/questions/3047894/how-to-detect-google-chrome-as-the-user-agent-using-php I then added a condition within the function to check for that global variable (isChrome) and do the appropriate code accordingly. – Bobe Mar 07 '13 at 11:20