jQuery .hover script

Question

I am pretty new to jQuery and here is my problem with this website.

As you see, There is a some small pictures in the right. I wrote a very simple script with HOVER in order to change the opacity of the element when mouse over. But this doesn't work until I do a small change in that script in Firebug (e.g. just by press space in any line of script it becomes active). and then it works! I completely confused by this.

If anyone can help me through, I can correct the same problem with another script that change the position of those small pictures as you move over.

I am searching for any solution that can do the same thing as I want.

Thank you and goodbye presently.

jasonlfunk · Accepted Answer · 2012-02-21 21:23:54Z

3

You need to wrap your calls to .hover() in $(document).ready() calls like you have in some of your other script nodes because the images are not loaded in the page yet when those calls are executed. For example, this:

  $('.s1').hover(
  function () {
    $(this).stop().css('z-index','9998').animate({left:-40});
  },
  function () {
    $(this).stop().css('z-index','').animate({left:-80});
  }
);

should be this:

$(document).ready(function(){
  $('.s1').hover(
  function () {
    $(this).stop().css('z-index','9998').animate({left:-40});
  },
  function () {
    $(this).stop().css('z-index','').animate({left:-80});
  }
);
})

Hope that helps.

answered Feb 21, 2012 at 21:23

jasonlfunk

5,2695 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jasonlfunk Over a year ago

You are welcome! Please accept the answer so the question doesn't show up as "Unanswered".

Collectives™ on Stack Overflow

jQuery .hover script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related