【问题标题】：Fade in and then out using jquery使用 jquery 淡入然后淡出
【发布时间】：2012-09-07 04:26:56
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

试试这个

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

DEMO.

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

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

而不是这个使用下面的行 $(".img").mouseover(函数(事件){

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

【讨论】：

选择器也可以是html标签名。

【解决方案4】：

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

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

DEMO

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案9】：

试试这个

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

【讨论】：

如需修改请告知。