JQuery Cycle not working in IE, Safari or mobile browsers. Works in FF and Chrome

I've tried running this through the w3c validator and can't seem to find my error. I'm hoping some extra eyes can find what I'm doing wrong.

JQuery

$(function() { 
$('#play').click(function() { $('#slides').cycle('toggle'); return false; });   

$('#slides').cycle({ 
    fx:    'none',
prev:  '#prev',
next:  '#next', 
    speed: '1000', 
    timeout: 2000 
}); 

$('#slides').cycle('pause');

$('.pause').toggle(
  function() {
    $('#pausectrl').attr({src: 'images/pause1.png', class: 'paused'});
  },
  function() {
    $('#pausectrl').attr({src: 'images/play1.png', class: 'playing'});
  }
);

$('.playing').live("mouseover", function(开发者_Python百科) {
  $(this).attr('src','images/play2.png');
});

$('.playing').live("mouseout", function(){
  $(this).attr('src','images/play1.png');
});

$('.paused').live("mouseover", function() {
  $(this).attr('src','images/pause2.png');
});

$('.paused').live("mouseout", function(){
  $(this).attr('src','images/pause1.png');
}); });

You can view the page here MMA Sample Slideshow

For Internet Explorer, you have to add quotes to the "class" identifier.

Change your class to "class" and that should be working ;)

Example: $('#pausectrl').attr({src: 'images/play1.png', class: 'playing'}); becomes $('#pausectrl').attr({src: 'images/play1.png', "class": 'playing'});