jQuery Fade Rollover Hover Effect - Dreamweaver CS5

[MFJdesigns]

Is it possible to replace "slow" and "fast" by "random" ? because i think that would make a pretty interesting effect.

also is it possible to combine this with for example a light box ?

please reply i would really like to know

thanks

MFJdesigns.

[ReyesFWS]

more jQuery tutorials please! this was an excellent tutorial that was explained perfectly and I would like to see more of these.

[Spike90]

In place of the animate you can also use jquery function .fadeTo(), it's also a bit shorter. And the first animate which set the images to an opacity, you could also use the .css() function so you don't get that tacky fade out when you load the page.

[TheRhoads6]

Thank you very much for this!

[Atskeloeloe]

Mine also don't work, I made the code exactly as you did, but my images only show up half transparent, not animated, and they won't get normal. Maybe the problem is the jQuery, but I dont think so. this is my code: $(document).ready(function(){ $('img').animate({ opacity:.5 }); $('img').hover(function(){ $('this').stop().animate({opac­ity:1}, 'fast'); }, function(){ $('this').stop().animate({opac­ity:.5}, 'slow'); }); });

What did I wrong?

[Morganhesketh]

Mine dont even work, can you send me the code to copy and paste

[witch1944]

How can you add on a lightbox effect to each photo? Thanks

[RosettesSpain]

Great Video, How can we add sound to the hover and also a link? Thanks

[Chris11Caz]

what do you do if you just want it to do it to certain images?

[smokenfly514]

I followed everything step-by-step. Is the code different for 1.7.1?

[THILENfilms]

@smokenfly514 Yes ofc it is dont you know anything about coding.

[smokenfly514]

@THILENfilms actually it's not; I got it to work. don't know if you're trolling or not..

[sdweaver2008]

Excellent job, Nathaniel - your videos have been a huge help. Smart and detailed in all the right ways. I managed to duplicate everything in my own html file. You may have said this and it passed by me, but this jquery effect only works on images rollovers. I placed a couple of non-rollover images and they weren't affected, just the rollovers. I love the effect, but is it intended to work only on image rollovers?

Thanks!

[amonxxx2]

dude you're great!!! Keep doin!!!!

[scottafc1]

my code is identical to yours, yet i get a syntax error. Any ideas?

[nemesissa1]

u sir, are a LEGEND

[THILENfilms]

@nemesissa1 No Jimmy Henrix was a ledgend

[lgadwords]

Thanks, would you happen to have a tutorial for a fading rollover button that fades from one state to another?

[tirathmistry]

Excellent jquery tutorial with nice step by step detail explanation

I am beginner of this jquery but after watching your jquery tutorials I learn so many new things about jquery and I am also using on my web design

Thanks so much tutvid

Thanks so much youtube to connect us

keep up good work

God Bless you :-)

[AnugaSE]

pointless to use jQuery, when you can do the samething with a lot less css...

[nicktheandroid]

you did your little animation in a horrible fashion.. you should have set the opac with .css() on dom ready, then used fadeTo() inside the hover...

[jbriz506pz]

i just can say...

AWSOME

[lillkutty007]

very well explained tutorial....Tutvid , Nataniel makes it sound so easy for this looks easy and is fun to to.....

[TheKnightMedia]

Never mind, it was a lightbox conflict. I managed to fix it, great tutorial by the way. Glad to have you back.

[TheKnightMedia]

Hey Tutvid, I'm having issues with getting this to work. No errors or anything like that, it's acting like Jquery isn't accessing any tags. I'm working from your website from your CSS tutorial. I'm not sure if it's because of all the div tags or what. But it works just fine when I make anew HTML doc. Could you help? Should I upload my html page?

[XhizorsmAs]

nice buddy that was really awsum thnks

[dreamweaverbuilder]

dude you're the best

[madman13669]

Man that was a great tutorial, props for stepping through it properly :D

[jamesrdolan]

you could even add it to an external js file to save space on your html file.

[iownslaves]

thank you!

[tsola2002]

quick question tutvid, how did you change your code view background to the dark colors & how did you get your tags to look like the color they are

[EmberflyLayouts]

I watched like half of this and then realized.. "wait.. I don't know JavaScript.. why am I watching this?"

[LISAB68]

Hi thanks for the tutorial you are very talented and now I have a cool effect on my wiki! BTW I gave some credit to you... =D Thanks again, Abz

[doboofficial]

@blapgat i know, @font-face and so on^^

but i hope ie10 will bring some major changes in html5/css3 standards

[vesipea]

I love how well you explain every thing that you do. Makes it so easy to follow. Just enjoy watching your videos and learning. Keep up the good work !

[doboofficial]

@blapgat persons who use IE dont deserve to see the brilliant css3 features :D

[meNiMONSTERs]

ouch use chaining....

$('a img').hover(function(){//code}­, function(){//more code}).animate({},500);

reduce your calls to the DOM

[1337Boredness]

o.o

[meNiMONSTERs]

boo. scripting in the head really? Let keep it optimized for the sake of your users.

[T0B0KKE]

tutvid is the best tutorial channel around! Too bad he doesn't play with After Effects and Premiere also... :(

[Moonpig1975]

everything by this man is awesome best tutorials on youtube

[jeowd]

Great Tutorial! Haven't seen this tutorial done that way, but it works thats the main thing. I would personally use fadeTo(); for changing opacity, as I would usually only use animate(); if I was moving elements as well. Nevertheless thats the best thing about web development there are so many different ways of doing things :)

[jettrooper00]

Thanks man!

[heerolim]

Hey do you know how to make a tooltip that appears at a fixed position on top of a picture? Hope you can make a quick tut on tt!

[AnimaPower9]

@heerolim You can do this with jQuery if you want you can google this sentence 'Giving a tooltip a fixed position' and it should the 3rd link called "jQuery Tooltip | Easy jQuery Tooltip with CSS & jQuery | Tooltip". If that is what you're looking for :).

[doboofficial]

with css3 you need only 1 extra attribute for your selector and you have the same effect, done in 5 seconds :)

[theswedishshemale]

@doboofficial tell us how?

[doboofficial]

@theswedishshemale

p {color:red; transition:color 5s;}

p:hover {color:blue;}

--> when you hover over the p, the color fades from red to blue in 5 seconds.

for each browser you have something like "-moz-transition", "-webkit-transition" and so on

[LukeSambrooks1]

@doboofficial hey, could you tell me what this is please.

[doboofficial]

@LukeSambrooks1

p {color:red; transition:color 5s;}

p:hover {color:blue;}

--> when you hover over the p, the color fades from red to blue in 5 seconds.

for each browser you have something like "-moz-transition", "-webkit-transition" and so on

[gunnerone]

@doboofficial but CSS3 Isn't supported in all browsers. When you use jQuery, you insure that everyone has the same experience.

[doboofficial]

@gunnerone thats right, but the css3-solution is the future and you can already use it quite well.

and jquery also only works with javascript on^-^

[tutvid]

@doboofficial Sure, but how disappointed would people be if they clicked on a jQuery tutorial only to hear some dude talking about CSS3?

We'll do some CSS3 at some point.

N.

[JOKBO1]

@tutvid i'm starting at javascript and i would like to know how to send a string from a textbox to li tag inside my div. i can send u the code.thanks. Please reply.

[aloykatos]

@doboofficial yes but css3 is not useful for people with older browsers.

[doboofficial]

@aloykatos thats why you should always update your browser^^

[protoblaze]

@doboofficial what is this extra attribute? I am new to all this so I would like to know alternate ways if possible

[Nati0us]

@doboofficial Wheres the link then?

[jbriz506pz]

@doboofficial

YEAH!...but..work at IE?

I'm sure that NO...but with jquery work!!!

[jbriz506pz]

@jbriz506pz

NOP...also work in IE

[robertusmol]

@jbriz506pz not in the newest IE... -,-

[doboofficial]

@jbriz506pz as far as i remember, it doenst work with ie9 :/

[meNiMONSTERs]

@doboofficial you mean 5 attributes, dont forget your vendor prefixes

[dragade101]

nice video

[ledsmash]

awesome. you are really great at teaching.

[ziggy071621]

hope videos keep rolling into my sub box #ftw

[9000pivot]

function inside of a function.....FUNCCEPTION

[Ichicracker]

@9000pivot

lmao i wonder how many pp get that :D

[SilverPenguins]

@9000pivot Funky..

[mrtreb20]

css3 can do that...

[Casperwilkes]

Glad your back.

[candyshop2000]

can you please do tumblr theme design :)

[Haroids]

Wow, very simple.

[VideoNewZ9]

great video want to see many programming tutorials

[hohoyun]

very nice tutorial

[DariusDaGreat86]

excellent tuts. keep em coming

[hihaatje]

hmm very easy library. looks great :)

[DstarSkater1]

Also what's so great about Dreamweaver? I think Sublime Text 2 is the best, and it's got a lot of the same features.

[DstarSkater1]

Uhhhmmm.. That'd be a lot easier and faster (And more efficient) using CSS3.

[shruburb]

@DstarSkater1 and not supported in any version of IE, including 9

[DstarSkater1]

@shruburb Anyone living in the dark ages and using IE doesn't even deserve to have all the nice fancy effects. They shouldn't be catered to at all.

[TheAppStoreOne]

Yay!! I love jQuery!

[GrandStudable]

thanks for this awesome tutorials!

reject mediocrity!