Question

我有一张 j片,使用.,而不是1个 mo和1个 mo,但是它有一点缺陷,即 works工程的湿度,但 mo不成。

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.

Answer 1

我认为,你想要的是:

$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);
    })
});

Answer 2

这是你制定法典的方法。目前,你只有改革职能。

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);   
        }); 
    }
);

Answer 3

当你以更可读的方式开放你的法典时,你可以看到问题:

$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); 
    });
});

<代码>hover 左轮机需要2个论据,但只有1个,each 仅举一个论点的方法 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.

Answer 4

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
);

Answer 5

Okay 。 Shaz 回答! 思想是正确的。地雷在<代码>(<>$(>web >>)上放置,因为它是一个孩子,$(#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);
    });
});

如果$(web”) is a child of $("#navweb” do so:

$("#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
    }
});

也可使用<代码>hover,仅附加一个功能:

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

Sorry I m a Littletired, 希望你们能理解!

Andreas

友情链接