Today, we’re going to take a look at the hover() method. This will allow us to write code for when a user mouses on and off the elements in a wrapped set. We’ll also take another quick look at animating elements.
Day 7: The hover() Methods
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
curtis allen
December 4th, 2008
great tutorial Jeffrey, keep up the good work.
Alen Sirovica
December 5th, 2008
Nice tutorial!
I saw a cool hover effect on this website:
http://kyanmedia.com/
Any chance of showing us how this can be achieved?
Anyway, I love the series. Very helpful.
Thanks
John Dyer
December 5th, 2008
Thanks soo much for these great video tutorials. I really hope you continue on to more advanced things!
Thorsten
December 5th, 2008
I love this series - watched them every day since last week.
Many thanks for it, I hope you have still _many_ ideas in your queue !
Best regards from germany
/thorsten
Dan
December 5th, 2008
Good tutorial as always but the video quality and stream rate were rubbish! Please go back to the video service you used day 1-6… it was sooo much better.
With this I had to full-screen it to see the text properly. Then, of course I couldn’t work on my own code at the same time.
Chandra
December 5th, 2008
The video is great as always! I have been following this regularly.
However, the new video player sucks.. I can’t find pause, rewind thing… text is also not clear as the streaming…
Back to NETTUTS player please…..
chris simpson
December 5th, 2008
great tutorial again. not sure about the new player though!
@ Alen Sirovica ^^
that site is great, i checked the source and it seems to be quite a simple effect to achieve. that whole site is coded beautifully, some a funny jquery ‘easteregg’ too. it seems they use jquery to detect the orientation changes for iphone users. im falling more in love with jquery: anyway i think the effect youre looking for is:
// slide-down images on homepage
$('#body_home #our_work li').hover(function(){
$(this).find('img').animate({top:'139px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
thanks again jeff!
Jeffrey Way
December 5th, 2008
I’m surprised to hear about the video player. It’s recorded at a much higher resolution. If you zoom to full size, which I always do, the quality is much, much better.
Matthias
December 5th, 2008
Man!
I really love this tutorials!!!
Keep on going!
Thanks
Tom
December 5th, 2008
Yes! love this! I didn’t know about the stop()!
Cerium
December 5th, 2008
Hi Jeffrey,
Nice work (again) !
Any chance to have some tips about “Draggable”, by the way I agree about the other to the player, it’s not easy to read if I don’t use the fullscreen
Kaly
December 5th, 2008
Hi Jeffrey,
Great tuts again. Thanks very much. But please change the player with the green one. I cant full screen the player. I dont know the reason. Its too tough to read the text without fullscreen.
Thanks
Kaly
Jeffrey
December 5th, 2008
@Cerium - Sure! I’ll cover it on Monday or Tuesday.
Alen Sirovica
December 5th, 2008
@chris simpson
Ah, looks pretty simple
I’ll give it a try. Thanks
Bennie Mosher
December 6th, 2008
Very awesome tutorial! I am using it on a up and coming site. I am also trying to make it so that I could possibly click on the images, and it would fade out a corresponding h1 - 1 and fade in the corresponding h1.
The site can be found here, http://dev.benniemosher.com/babymosher. The effect I am trying to do this with is the images and the h2 I think. It is in the black section. Any suggestions would be appreciated thank you.
Start Your Own Website
December 6th, 2008
Hey thanks Jeffrey for doing all of this… It has been great to be able to watch. I’m learning a lot!
Seich
December 6th, 2008
Nice tutorial, creates some nice effects. I have the same general comment about the new player.. I cannot find the play/pause buttons..
Steve Davis
December 8th, 2008
When’s day 8 coming??? I’m salivating!
Deepak
December 8th, 2008
The tutorials were excellent.
plz upload for drupal
jon
December 8th, 2008
love your tuts so far!!! you totally corned the niche, i just couldn’t crack into jquery before but now you’ve made it so easy!
that said, hate the new player.
reasons:
1) the stupid popup/hover display for the progress bar, its annoying especially for this kind of application because im constantly mousing in and out over it and frankly the realestate it saves is just not that useful.
2) when you pause (which i do often when working along with your lovely tuts) a bloody big play button covers the middle of the screen and obstructs what i could see before.
3) personal opinion, but i found the last one more visually appealing. in fact, when i first saw it i had thought to myself… ’self, this is a great player’.
4) like another person mentioned… having the vid in full screen is just not practical for coding so high res on that end isnt all that helpful.
4b) i much preferred when you would use the screen cast’s zoom functionality, it made the code completely readable thus rendering the HD a moot point, imho
sorry to gripe so heavily, but i’m hooked on your tuts and really hoping i can convince you to switch back. !!
either way, thanks for the hard work and time taken.
MKL
December 9th, 2008
Arg, the player isn’t working for me. It plays so choppy, even after I wait for it to load. Hopefully it’s just my issue and I can catch it another day.
Johnny
December 13th, 2008
i couldn’t even read what you were doing… please zoom in more next tiem.
B.Ackles
December 14th, 2008
@Alen Sirovica
I agree that’s an interesting effect. Your curiosity made Kyan write a blog post on the source code of that effect.
Link to post:
http://blog.kyanmedia.com/archives/2008/12/10/easy_image_rollovers/
Source Code:
/* JQuery */
$(’#body_home #our_work li’).hover(function(){
$(this).find(’img’).animate({top:’139px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({top:’0px’},{queue:false,duration:500});
});
/* stylesheet */
#our_work li{
float:left;
margin:0 30px 95px 0;
padding: 5px 7px 8px 5px;
width:258px;
}
#our_work li a {
display: block;
position: relative;
overflow: hidden;
height: 107px;
width: 226px;
padding: 16px;
}
#our_work li a:focus, #our_work li a:hover { text-decoration: none; }
#our_work li img {
position: absolute;
top: 0;
left: 0;
height: 139px;
width: 258px;
}
Rotoheni
December 14th, 2008
Yah that was good. Loving the jquery!
Alex
December 14th, 2008
Jeffery you are awesome, i want to swap brains with you
yamaniac
December 14th, 2008
Amazing series!!!! Loved em!!! but…………………….Arggggggggggggg!!!!!!!!! The video ruined this lovely tutorial! Hope you can upload another one in a better quality!!!
Sean
December 17th, 2008
There’s no pause on this player so I can’t get the video to buffer properly - it’s impossible to listen to as it keeps cutting out.
Sam
December 17th, 2008
Jeff, really cool tut… and you´re an excellent pedagogue. Keep them coming…
From Sam (Portugal)
Jeffrey
December 17th, 2008
@Sean - Just hit the spacebar to pause.
Andy W
December 18th, 2008
Agree that the video ruins this - previous videos zoomed into the text allowing a clear view. Yes, you can go full screen, but as soon as I click on another window (on my second screen), the browser loses focus and it reverts back to windowed… And in windowed mode, I can barely read the code
Pitel
December 22nd, 2008
Thanks for the stop() hint. It solved my problem from previous project
Thomas
December 22nd, 2008
I have’nt been into JScript much but will be using it from now on. Pausing the new videoformat was just clicking on the film. I liked it but I canalso see a point in programming simultaneuously, though I think I’ll just see through all tuts first. Thanx to Jeffry from Norway
monaye
December 25th, 2008
Great TUTS!! I was just starting to use Jquery and this series get me into more. Hope you can continue until hundreds
!!
albertomarlboro
December 30th, 2008
Thanks for share your knowledge.
But the videos till 6 are smooth, blip.tv is better than viddyou.com
binz
January 8th, 2009
this is the best. I will keep study it tomorrow!!! Great job!!!!!!!!!!!!!!!!
sumit
January 8th, 2009
Hate the new player
can you please upload this on blip.tv
PJ
January 13th, 2009
good tutorials, just the way I need it.
I watched day 1 to 6, but this day, day 7 will not start. Day 8 works right.
Ashkan
January 13th, 2009
hi! thnx 4 these great vidz, im not new in scripting but in jQuery. its some kind of different than other.
btw, i can see all the videos, but this one ( day 7) i cant! its not loaded. where can i find this one?
thnx! %%-
Ashkan
January 13th, 2009
p.s sorry 4 my bad english
Al
January 13th, 2009
Jeffery,
The tutorials are great. I followed upto day 6 and then the videos don’t load. I would love to go through the entire series.
Thanks
AL
Jeffrey
January 13th, 2009
Sorry about the video everyone - just a typo. It should work now.
Ashkan
January 13th, 2009
thanks for your attention
Sourabh
January 25th, 2009
Wasn’t sure if Jeff covered this already. I saw Bennie Mosher had a comment about this though. How can we combine day 6 and day 7 of the tutorials? That is how can we have the back image to have 0 opacity, the front image to have .5 opacity … when we hover, the opacity changes to 1 for the back image .. etc..
I tried it but couldn’t get it work.
Any help is much appreciated. Thanks !
Svend
February 17th, 2009
Great tutorial, but the video quality was realy bad. I couldn’t see what you were typing sometimes
Reset
February 19th, 2009
Great tutorial. I am really loving the jQuery and PHP for beginners series. I applied this jQuery technique to a gallery, but I noticed that when an image was close to the browser margins the hovered image scrolled the page. This makes sense because it is just taking the x & y coordinates. Is there anyway to tell the jQuery that when it hits a browser margin to not scroll the page, instead to stop at the broswer’s edge?
Thanks!
Desbruères
March 31st, 2009
Hi and a big thanks.
Despite my poor english (as a French, it’s already a lot !)
I truely understand your lesson and it makes so much easier
than learning by myself…
Thanks again.
Jared
April 1st, 2009
Just wondering something - what is the difference between the following pieces of code…
$(’#container img’).hover(function(){
$(this).animate({”opacity”:1})
},function(){
$(this).animate({”opacity”:.5})
});
VS
$(’#container img’).hover(function(){
$(this).animate({”opacity”:1}),
$(this).animate({”opacity”:.5})
});
from a functional standpoint it seems the same…
Abdurrahman Gemei
April 6th, 2009
Thanks for the great series!
I’m making my own type of image map using the hover function and 0 to 1 opacity. What I want to do is when the mouse points at the one of elements, the element fades in along with a child element.
The elements are positioned relatively and the child element is a caption with a background, also shifted to the left using relative positioning.
What happens is that when I hover on parent element, the child element does not appear. I have used a very similar jQuery code to the one used here.
crackersAkA
April 10th, 2009
Jeff,
Im just wondering why we have th specify ‘hover’, but never had to mention anything in the functions about mouseOver or mouseOut. How does jQuery know that we mean ‘onMouseOut, set opacity back to 1′.
Love the tutorials, thank you.
Mickey Hoang
April 12th, 2009
Thanks for video
Mike
May 3rd, 2009
I noticed you are using the | character here.
Care to elaborate?
Mike
May 3rd, 2009
scratch that jeff. it was just the way the shrunk vid made open parenthesis look.
Dan
May 4th, 2009
Like your pronunciation of hover.
huver? LOL.
indi
May 5th, 2009
if i want to reverse this effect, like first al of the image would be on full opacity and when i hover over the image the images which aren’t hovered over would lower their opacity and when i mouse out the opacity would be set back to full opacity.
indi
May 5th, 2009
$(’#rightNav img’).animate({”opacity”: 1 });
$(’#home’).stop().hover(function() {
$(’#abour img’).stop().css({”opacity”: .7 });
$(’#Eng img’).stop().css({”opacity”: .7 });
}, function(){
$(’#rightNav img’).stop().css({”opacity”: 1 });
});
$(’#Eng’).stop().hover(function() {
$(’#home img’).stop().css({”opacity”: .7 });
$(’#abour img’).stop().css({”opacity”: .7 });
}, function(){
$(’#rightNav img’).stop().css({”opacity”: 1 });
});
$(’#abour’).stop().hover(function() {
$(’#home img’).stop().css({”opacity”: .7 });
$(’#Eng img’).stop().css({”opacity”: .7 });
}, function(){
$(’#rightNav img’).stop().css({”opacity”: 1 });
});
this is what i did, and it is very redundant
need help in cleaning that. sorry for double post.
Codie
May 9th, 2009
Loving it, just loving it, thank you soo much for teaching me how to jQuery,
charlie
May 15th, 2009
Right ON!
This is totally awesome! Thank you for the lessons…
L.A.
May 21st, 2009
Cool tutorial, very useful. I wish you had zoomed into the code so I could see it better, as you have in the other videos. Really hard to read.
man
May 23rd, 2009
I love this site very much.
hercules
June 1st, 2009
Dear Sir :
tks ! i am very like your site .. and very tks for your course .. that’s halpful for me… tks again.
Taiwan Hercules.
steve
June 13th, 2009
Thank You, I love your tutorials, they helped me very much.
I have one problem, with .stop()… i am trying to make sliding popup, and everything is working ok, except that annoying behaviour with repeating animation, and if i use stop() to prevent that, and then move mouse over trigger link several times, it stops working, and hidden #div doesn’t appear at all, than i have to refresh the page to start working again. Any suggestion ?
here is my code:
html:
Click
css:
#box {
width: 120px;
height: 80px;
background-color: #C0BDFF;
display: none;
}
jquery:
$(document).ready(function(){
$(’a').hover(function() {
$(’#box’).stop().slideDown(600);
}, function() {
$(’#box’).stop().slideUp(600);
});
});
Thanks in advance
myutmost
June 25th, 2009
고마워요….very good. thanks!