DEMO

Question

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

这是我的代码：

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

Answer 1

试试这个

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

DEMO

Answer 2

您可以使用on两个事件。我建议不要使用hover，因为它是about to get deprecated。

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

http://jsfiddle.net/gT4vC/

Answer 3

我认为你在这里缺少课程或身份名称..

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

而不是在线下使用 $（ “IMG”）。鼠标悬停（函数（事件）{

指定鼠标悬停事件的类或ID。

Answer 4

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

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

DEMO

Answer 5

试试这个：

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

Answer 6

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

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

Answer 7

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

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

DEMO

Answer 8

是的，你可以通过

来做到这一点

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

这是js fiddle

更新

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

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

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

这里是js fiddle

Answer 9

试试这个

$(document).ready(function(){
  $(".main").mouseenter(function(event){
      $(this).fadeTo("fast", 0.5).mouseleave(function(){
              $(this).fadeTo("fast", 1.0);
      });
  });
});

使用jquery淡入然后输出

9 个答案:

DEMO