I'd suggest reading through this blog post: http://jqueryfordesigners.com/image-cross-fade-transition/
On Jan 7, 2:14 pm, Glen Healy <glen.f.he...@gmail.com> wrote: > no more like a slowdown in the transition between the images. hope that > makes sense. lol. Like if you move over it now really fast it is "twitchy" > im thinking what if it were possible to add like a ms or 2 to the actual > hover effect and they will blend more. > > instead of fading out they fade into one another i guess is what im trying > to say > > On Thu, Jan 7, 2010 at 2:05 PM, MorningZ <morni...@gmail.com> wrote: > > like so? > > >http://jsbin.com/amuma3/edit > >http://jsbin.com/amuma3 > > > On Jan 7, 1:45 pm, Glen_H <glen.f.he...@gmail.com> wrote: > > > Here is another question if you have the time, > > > > now that the image changes on hover, can I add a fade animation so > > > that it fades to the hover image as opposed to switching back and > > > forth? or would I have to create a whole new function? > > > > On Jan 7, 1:38 pm, MorningZ <morni...@gmail.com> wrote: > > > > > here's your exact code working > > > > >http://jsbin.com/aguji/edithttp://jsbin.com/aguji > > > > > On Jan 7, 1:34 pm, MorningZ <morni...@gmail.com> wrote: > > > > > > ready to know what a major problem is?? > > > > > > your "script.js" is: > > > > > > $(document).ready(function() { > > > > > // do stuff when DOM is ready > > > > > $("#footer #footer-contain #availability img").hover( > > > > > function() { > > > > > $(this).attr("src", "./images/avail_hover.png"); > > > > > }, > > > > > function() { > > > > > $(this).attr("src", "./images/availab.png"); > > > > > } > > > > > ); > > > > > }); > > > > > > }); > > > > > > There's an extra "});" causing a syntax error, stopping JavaScript > > > > > dead in it's tracks...... Firebug pointed that out on page load > > > > > > On Jan 7, 12:56 pm, Glen Healy <glen.f.he...@gmail.com> wrote: > > > > > > > I put up my site quickly here:http://www.glenhealy.com/ > > > > > > > the image should be at the bottom in the footer, if you can view > > the code, > > > > > > maybe you can see what the deal is? > > > > > > > i used the exact code used in the example so there has to be a file > > issue > > > > > > > On Thu, Jan 7, 2010 at 12:44 PM, MorningZ <morni...@gmail.com> > > wrote: > > > > > > > it changes it > > > > > > > >http://docs.jquery.com/Attributes/attr#keyvalue > > > > > > > > attr( key, value ) > > > > > > > Set a single property to a value, on all matched elements > > > > > > > > going a different direction isn't the solution, something else is > > > > > > > wrong..... > > > > > > > > and your "current one" of "img src" as an attribute name is not > > going > > > > > > > to work, it's not the name of the property you need to set > > > > > > > > here's a super quick and working example > > > > > > > >http://jsbin.com/aluhe/edit(code)<http://jsbin.com/aluhe/edit%28code%29> > > > > > > >http://jsbin.com/aluhe(run) <http://jsbin.com/aluhe%28run%29> > > > > > > > > On Jan 7, 12:32 pm, Glen_H <glen.f.he...@gmail.com> wrote: > > > > > > > > does the attr function "change" the img source or does it "add" > > it in? > > > > > > > > Perhaps I need a different function to do it? is that possible? > > > > > > > > > i am going to try to add a the remove attr function first, then > > run > > > > > > > > the current one and see if that works... > > > > > > > > > On Jan 7, 12:25 pm, MorningZ <morni...@gmail.com> wrote: > > > > > > > > > > Perhaps the path to the image itself isn't "./images" ? > > > > > > > > > > Other than that,maybe some more code to show or better yet a > > live, non- > > > > > > > > > working page...... > > > > > > > > > > Rest assured the "hover" event does work, and the way to set > > an > > > > > > > > > <img>'s source is $(this).attr("src") ... there's something > > else not > > > > > > > > > seen/talked-about/thought-of that is the issue :-) > > > > > > > > > > On Jan 7, 12:10 pm, Glen_H <glen.f.he...@gmail.com> wrote: > > > > > > > > > > > I have it now set up like this: > > > > > > > > > > > $("#footer #footer-contain #availability > > img").hover(function () { > > > > > > > > > > $(this).attr('src', > > > > > > > './images/avail_hover.png'}); > > > > > > > > > > > } > > > > > > > > > > > it still isnt working. I orig. had it set as src. but > > nothing seemed > > > > > > > > > > to be working then so i messed around and changed it to img > > src. > > > > > > > > > > > any other ideas as to why it might not be working? > > > > > > > > > > > On Jan 7, 11:41 am, MorningZ <morni...@gmail.com> wrote: > > > > > > > > > > > > $(this).attr({'img src' : './images/avail_hover.png'}); > > > > > > > > > > > > there is no "img src" attr, but there is "src", so > > > > > > > > > > > > $(this).attr('src', './images/avail_hover.png'); > > > > > > > > > > > > and there's a second event to hook on the .hover event is > > when you > > > > > > > > > > > mouse off, so use that event to revert back to whatever > > image was > > > > > > > > > > > there > > > > > > > > > > > > On Jan 7, 11:02 am, Glen_H <glen.f.he...@gmail.com> > > wrote: > > > > > > > > > > > > > In my footer I have a sign where I want it to say one > > thing > > > > > > > regularly, > > > > > > > > > > > > and then when someone hovers, i want it to say > > sometyhing else. I > > > > > > > > > > > > basically made 2 images, and I just want to switch > > images on the > > > > > > > > > > > > hover. > > > > > > > > > > > > > here is my code I used and its not working.: > > > > > > > > > > > > > $("#footer #footer-contain #availability > > img").hover(function () > > > > > > > { > > > > > > > > > > > > $(this).attr({'img src' : > > > > > > > './images/avail_hover.png'}); > > > } > > > > > > > > > > > > > can anyone help me out with what I need to do?
