Quote Widget - Opacity IE 9

[Carrear]

Hi meine lieben,

ich habe ein Widget um eine Liste in Form eines Karussels darzustellen. Die Elemente die in den Hintergrund rücken, werden leicht transparent. Aber das ganze funktioniert nicht im IE. Ich poste euch mal das JS und das CSS - vielleicht fällt euch der Fehler auf. Hat sicher irgendwas mit Alpha Filter oder so zu tun, oder? Denn so wie ich gelesen habe müsste IE 9 Opacity eigentlich beherrschen.

$(document).ready(function(){
(function($) {

	var duration = 600;

	$('.quote-widget ul')
		.on('ready', function() {
			$('.quote-widget').addClass('ready');
			
			if (Modernizr.textshadow) {
				$(this).find('li').not( $(this).find('li').first() ).css('color', 'rgba(255, 255, 255, .01)');
			} else {
				$(this).find('li').not( $(this).find('li').first() ).find('blockquote').css('opacity', 0.2);
			}
		})
		.roundabout({
			shape: 'rollerCoaster',
			minOpacity: 0.3,
			minScale: 0.5,
			duration: duration,
			btnNext: '.quote-widget .next',
			btnPrev: '.quote-widget .prev',
			clickToFocus: false,
			triggerFocusEvents: true,
			triggerBlurEvents: true,
			autoplay: true,
			autoplayDuration: 4000,
			autoplayPauseOnHover: true
		})
	;
	
	$('.quote-widget li')
		.on('focus', function() {
			//$(this).animate({color: 'rgba(255, 255, 255, 1)'}, duration);
			if (!Modernizr.textshadow) {
				$(this).find('blockquote').animate({opacity: 1}, duration / 2);
			}
		})
		.on('blur', function() {
			if (Modernizr.textshadow) {
				$(this).animate({color: 'rgba(255, 255, 255, 0.01)'}, duration);
			} else {
				$(this).find('blockquote').animate({opacity: 0.2}, duration);
			}
		})
	;

}(jQuery));

        });

/* @group Quote Widget */


.quote-widget.ready {
	visibility: visible;
}

.quote-widget ul {
	margin: 0;
	padding: 0;
	height: 100px;
	font-size: 18px;
	line-height: 1.1;
}
.quote-widget li {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 380px;
	cursor: default;
}
.quote-widget li:first-child {
	display: block;
}
.quote-widget li.roundabout-moveable-item {
	display: block;
	/*text-shadow: 0 0 8px #FFF;*/
	/*color: rgba(255, 255, 255, 0);*/
}
.quote-widget li.roundabout-in-focus {
	cursor: auto;
	text-shadow: none;
	color: #FFF;
	opacity: 1;
}

.quote-widget blockquote {
	margin: 0;
	padding: 0;
}

.quote-widget p {
	margin: 0;
}

.quote-widget footer {
	margin-top: .8em;
	font-size: .8em;
}

.quote-widget .nav {
	display: block;
	position: absolute;
	top: 50%;
	z-index: 500;
	height: 20px;
	width: 20px;
	margin-top: -10px;
	color: #004566;
}
.quote-widget .nav.prev {
	left: 0;
}
.quote-widget .nav.next {
	right: 0;
}
/* @end */

 

[Carrear]

Vielleicht liegt es auch an dem triggerBlurEvent. Das wird hier genutzt:

					if (inFocus !== info.inFocus) {
						// blur old child
						if (data.triggerBlurEvents) {
							self.children(data.childSelector)
								.eq(info.inFocus)
									.trigger("blur");
						}

Aber ich wüsste eigentlich nicht wieso das nicht funktionieren sollte !?