0

我现在才刚刚开始学习使用 jQuery，并且正在尝试淡入淡出图像。当我将鼠标悬停在图像上时，我想将图像淡化为一半不透明度。然后，只有在我移除图像的鼠标后，图像才会恢复为完全不透明。现在，我正在使用回调函数将图像淡入，但它是在淡出发生后立即执行的，而不是在我的鼠标离开图像时执行。有人对正在发生的事情有一些提示吗？

这是我的代码：

$(document).ready(function(){
  $("img").mouseover(function(event){
    $(this).fadeTo("fast", 0.5, function(){
      $(this).fadeTo("fast", 1.0)}
    );
  });
});
4

9 回答 9

3

试试这个

$(document).ready(function(){
    $("img").on('mouseover', function(event){
        $(this).fadeTo("fast", 0.5);
    }).on('mouseout', function(){
       $(this).fadeTo("fast", 1.0)    
    });
});​

演示。

于 2012-09-07T04:33:02.500 回答
3

您可以将两个事件与on. 我建议不要使用hover，因为它即将被弃用。

$("img").on({
    mouseover: function() { $(this).fadeTo('fast', .5); },
    mouseout: function() { $(this).fadeTo('fast', 1); }
});​

http://jsfiddle.net/gT4vC/

于 2012-09-07T04:33:27.987 回答
1

我认为您在这里缺少班级或ID名称..

$("img").mouseover(function(event){

而不是在 $(".img").mouseover(function(event){

为鼠标悬停事件指定类或 id。

于 2012-09-07T04:32:20.830 回答
1

用户.hover()函数，它接受两个参数，一个用于 mouseenter 事件，另一个用于 mouseleave 事件。

$(document).ready(function(){
    $("img").hover(function(event){
         $(this).fadeTo("fast", 0.5);
      },
      function() {
         $(this).fadeTo("fast", 1.0);
      });
});

演示

于 2012-09-07T04:32:25.837 回答
0

试试这个：

$(document).ready(function() {
    $("img").mouseenter(function(event) {
        $(this).fadeTo("fast", 0.5);
    }).mouseleave(function() {
        $(this).fadeTo("fast", 1.0);
    });
});​
于 2012-09-07T04:32:30.147 回答
0

演示：http: //jsfiddle.net/DTzTH/

$(document).ready(function () {
  $("img").hover(function () {
    $(this).fadeTo("fast", 0.5);
  }, function () {
    $(this).fadeTo("fast", 1.0);
  });
});​
于 2012-09-07T04:35:15.520 回答
0

这是你要找的吗？更改顶部的大写常量以获得所需效果的正确时间。

$(document).ready(function(){
    var FADEOUT_TIME = 500;
    var FADEIN_TIME = 500;
    $("img").on({
        mouseleave: function() {
            $(this).fadeTo(FADEIN_TIME, 1);
        },
        mouseenter: function() {
            $(this).stop().fadeTo(FADEOUT_TIME, 0.5);
        }
    });
});

演示

于 2012-09-07T04:35:33.103 回答
0

是的，你可以通过 

$(document).ready(function(){
    $("img").on({
    mouseover: function() { $(this).fadeTo('fast', .8); },
    mouseout: function() { $(this).fadeTo('fast', 1); }
});
});

这是js小提琴

更新

或者你也可以使用 css 属性opacity 

$(document).ready(function(){
    $("img").mouseover(function(){
       $('img').css('opacity','0.4');
    });

    $("img").mouseout(function(){
       $('img').css('opacity','1');
    })
});

因为这里是js fiddle

于 2012-09-07T04:36:11.760 回答
0

试试这个

$(document).ready(function(){
  $(".main").mouseenter(function(event){
      $(this).fadeTo("fast", 0.5).mouseleave(function(){
              $(this).fadeTo("fast", 1.0);
      });
  });
});
于 2012-09-07T04:42:41.667 回答