jQuery for Absolute Beginners: Day 7

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

Download the Source Code



73

Comments
  • Mike says:

    I noticed you are using the | character here.

    Care to elaborate?

  • Mike says:

    scratch that jeff. it was just the way the shrunk vid made open parenthesis look.

  • Dan says:

    Like your pronunciation of hover.

    huver? LOL.

  • indi says:

    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 says:

    $(‘#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 says:

    Loving it, just loving it, thank you soo much for teaching me how to jQuery,

  • charlie says:

    Right ON!
    This is totally awesome! Thank you for the lessons…

  • L.A. says:

    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 says:

    I love this site very much.

  • hercules says:

    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 says:

    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 says:

    고마워요….very good. thanks!

  • Asmae says:

    thank you a lot ..this has been very helpful

  • archie says:

    Hello,
    Thank you for posting this inspiring tutorial!
    I am a complete newcomer to js and this series has motivated me to give it a try.
    I am looking to make a portfolio gallery that would use a hover method like tute 7 in a layout and function similar to-
    http://www.webdesignerwall.com/demo/jquery/img-replacement.html
    I would also like a para of descriptive html text, in a div along side the larger images, that also changes according t the image showing.
    Can you suggest a solution?
    Thanks again
    Archie

  • Roy says:

    wow, i cannot download the video, its not progressing at all…

    i think i’ll miss this one… i really need this tutorial:P can u upload a better version?

    thx

  • xhr says:

    is version of your editor free or not? I wanna get same :) looks very comfortable :)

  • Dr Rhyf says:

    great tut, js keep improving… :)

  • Brad says:

    Thank you, this was very useful! Keep it up!!!

  • The video seems to blow up around 7 minutes. I’m using Chrome.

  • Barry says:

    As always, top notch stuff. :)

  • KN says:

    Good instructional. I think I would point out that hover accepts to values to further clarify the introduction of a second function. If someone hasn’t reviewed the documentation they may not realize that this method accepts more than one and also why.

  • Matt says:

    Hi,

    Loving these screencasts – excellent work! I have a question:

    I want to use this fade in/out technique so that when you hover over a link, a related image fades in/out.

    Click here 1

    Click here 2

    What is the best way to do this? I tried to reuse the function but target specific IDs and after the first div, each one fades out all images in the previous divs.

    I hope this is making sense. Any tips are greatly appreciated.

    Thanks Again!

  • Rumi says:

    The screen of Day 7 lesson is unreadable.