Conveyor Belt slideshow with opacity hover

[masterquest]

Hello, I hope someone take a hand.

I want to implement opacity to these images but I have no success ...

This is the code that implements the alpha to the images, using jQuery.


<script type="text/javascript">
$(document).ready(function() {
$(".thumbs img").fadeTo("slow", 0.6);
$(".thumbs img").hover(function() {
$(this).fadeTo("slow", 1.0);
}, function() {
$(this).fadeTo("slow", 0.6);
});
});
</script>

The problem is not put in any image, because if I get in any normal image. What happens is I put it on a slide ... specifically this...

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

I have tried to implement it, as it should normally be


leftrightslide[0]='<a href="#" class="thumbs">
<img src="dynamicbook1.gif" border=1></a>'

But do not get results ... I do not know why ... scriptaculous had used before and that if I worked perfectly with this code... this.


leftrightslide[0]='<a href="#"><img style="opacity:0.6;filter:alpha
(opacity=60)"onmouseover="new Effect.Appear(this, {from:0.6, to:1.0});"
onmouseout="new Effect.Appear(this, {from:1.0, to:0.6});"
src="dynamicbook1.gif" border="0"></a>'

I do not want to use scriptaculous, because on my page I have jQuery and I'm in some ways conflicts

I hope someone can help ... they are grateful.

Regards and excuse my English

[jscheuer1]

Requires jQuery 1.4 or greater:


<script type="text/javascript">
jQuery(function($){
var opacitystr = 'opacity: 0.6;';
/*@cc_on @*//*@if(@_jscript_version >= 5)if($.browser.version < 9)opacitystr = 'filter:alpha(opacity=60);';@end @*/
$('head').append('<style type="text/css">#test2 img, #test3 img {' + opacitystr + '}<\/style>');
$('#test2 img, #test3 img').live('mouseenter mouseleave', function(e){
$(this).animate({opacity: e.type === 'mouseenter'? 1 : 0.6}, 'slow');
});
});
</script>

[masterquest]

Now if it worked, thank you very much

[jscheuer1]

What version of jQuery are you using? As stated, this requires 1.4 or greater. Or perhaps you have some other error on your page.

It works:

http://home.comcast.net/~jscheuer1/side/files/fade_hover.htm

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.