Hi there,
http://www.pictureandword.com/test_platform/index.html Tried out your code, and the results are a bit odd. The first button that you rollover has it's image altered, but it does not fade out again. Thereafter all of the buttons behave differently in that they all have a fade only on fadeOut. Mmm... This has got me really puzzled. I cannot understand why it behaves differently the first time, and why the images don't revert back when .hover is no longer. The .js is at: http://www.pictureandword.com/test_platform/effects.js Nathan Wrigley. [EMAIL PROTECTED] _____ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ariel Flesler Sent: 25 March 2008 14:54 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Making a fading rollover Try this: $(function(){ $('div.out').hover( function(){ $(this).next().stop().fadeIn(250); }, function(){ $(this).next().stop().fadeOut(3000); } ); }); Will be more reliable if you get the divs class fade inside the containers... still this should work. Cheers On 3/25/08, NJW <[EMAIL PROTECTED]> wrote: http://www.pictureandword.com/test_platform/index.html This is the Url for what I am doing. I don't understand how I can use stop() to cause the animation to cease to alleviate the issue above.. The .js is at: http://www.pictureandword.com/test_platform/effects.js I'm sorry to bother you again. Thanks. On Mar 25, 1:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote: > Use stop()http://docs.jquery.com/Effects/stop > > -- > Ariel Fleslerhttp://flesler.blogspot.com > > On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote: > > > I am trying to make a rollover button using 'fade' and 'hide'. > > > I have 2 images absolutely positioned on a page, one exactly over the > > other and the 'lower' image starts with 'display:none;'. > > > I want to fade out the 'top' image such that it appears that the lower > > image is fading in. > > > I have used: > > > $(document).ready(function () > > { > > $('#case').mouseover(function() > > { > > $('#case_over').fadeIn(250); > > }); > > $('#case_over').mouseout(function() > > { > > $('#case_over').fadeOut(3000); > > }); > > > }); > > > Where #case is the 'top' image and #case_over is the 'lower' image. > > > This works just fine, but I have to wait for the 3 second (3000) > > fadeOut before I can initiate the fadeIn again. > > > Is there anyway that I can interupt the fadeIn and fadeOut such that > > if the user does mouseover during the fadeOut it will immediately > > start the fadeIn. > > > There might well be a more elegant solution to all this - I am new to > > all this stuff! > > > Thanks in advance. <br
