0

I have a jquery script to use .hover instead of 1 mouseover and 1 mouseout, however it has a slight flaw, the mouseover bit of the .hover works, but the mouseout doesn't.

the images fade to 100% opacity on mouse over, and change background image, then on mouseout, the image changes back to original image and also it fades out, however the mouseout bit isn't working and the image doesn't swap back to the original and doesn't fade.

$j('#navweb').hover(function(){
$j(".web").each(function(){
 var i = parseInt(this.id.substr(2));
$j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);}, 

function(){
$j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4); 
 });
});

I reckon its just a small error, but I cant see it anywhere. many thanks to all responders.

Improve this question

5 Answers 5

Reset to default
3

I believe what you want is this:

$j('#navweb').hover(function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    })
}, function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    })
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

It's the way you have your code structured. You currently only have the mouseover function.

Try:

$('#navweb').hover(
    function(){ 
        $(".web").each(function(){  
            var i = parseInt(this.id.substr(2)); 
            $(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
        });
    }, 
    function(){ 
        $(".web").each(function(){  
            var i = parseInt(this.id.substr(2)); 
            $(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);   
        }); 
    }
);
Improve this answer

4 Comments

i thought the whole, }, function(){ lines 4-6 called the mouseout function? just checking it, and i believe youre right, im missisng some parenthesis
In theory it would (assuming it was structured properly), but you are within your $.each() loop, not the hover() event.
i see, i was thinking i could use the same (".web").each for both sections, i guess not. thanks for your reply..... yes i see that now comparing your structure to mine. i was still within the each event. thanks a lot.
Did this not solve your issue? I see no difference between this solution and the accepted one aside from it being condensed and using the alias $j (typically used when other javascript libraries are used) and $ (the default alias).
1

When you open your code in a more readable way, you can see the problem:

$j('#navweb').hover(function(){
    $j(".web").each(function(){
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    }, 
    function(){
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4); 
    });
});

The hover handler requires 2 arguments, but only gets one, while the each method which only takes one argument takes 2.

Make sure to make proper linebreaks and spacing so that you can view your code easily. The benefit of readability outweighs the disadvantage of the few extra bytes.

Improve this answer

Comments

0

To get the thing to fade out, the first argument to the second fadeTo call should be 0, not 100. Also, RobB is right, the formatting is incorrect. Try this

$j('#navweb').hover(
  function(){
    $j(".web").each(function(){
      var i = parseInt(this.id.substr(2));
      $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    }) // ends each function
  }, // ends 1st hover function
  function(){
    $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('0', 0.4); 
  }  // ends 2nd hover function
);
Improve this answer

1 Comment

actually the first attribute is the duration and the fading opacity is the 0.4/1 :) thanks for your reply tho.
0

Okay .. see Shaz's answer! Thinks hes right. Mine is putting over on $('.web') asuming it was a child of $('#navweb')

What you are doing here is make the hover function on $("#navweb") but put the functions on $(".web")'s each function:

$j('#navweb').hover(function() {
    $j(".web").each(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    },function() {
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    });
});

No need for each when hover go throw every single HTMLElement in the jQuery Object $(".web")

$j(".web").hover(function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + 'col.png)').fadeTo('100', 1);
    },function() {
        var i = parseInt(this.id.substr(2));
        $j(this).css('background-image', 'url(back/' + i + '.png)').fadeTo('100', 0.4);
    });
});

If $(".web") is a child of $("#navweb") do like this:

$("#navweb .web").hover(...

Just for the record: hover addes to events mouseenter and mouseleave these are special jQuery events. And therefore a helper function doing this:

$(element).bind("mouseenter mouseleave", function(event) {
    if ( event.type == "mouseenter" ) {
        // calls first function
    } else {
        // calls second function
    }
});

You can also use hover with just one function attached:

$(element).hover(function(event){
    if ( event.type == "mouseenter" ) {
        // do this
    } else {
        // do that
    }
});

Sorry I'm a little tired, hopes you understand!

Andreas

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.