javascript - 悬停时显示/隐藏 jquery 函数的平滑过渡？

Question

我正在使用图像映射，当图像的某些部分悬停时，它会显示 div..(如本网站 http://jquery-image-map.ssdtutorials.com/ )我希望 div 能够平滑过渡地显示...这是我的 js 代码

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('.' + id).show();
            $('#'+ id).siblings().each(function() {
                if ($(this).is(':visible')) {
                    $(this).hide();
                }
            });
            $('#'+ id).show();
        } else {
            $('.' + id).hide();
            $('#'+ id).hide();
            $('#room-0').show();
        }
    }
};
$(function() {

    $('area').live('mouseover mouseout', function(event) {
        mapObject.hover($(this), event);
    });

});

任何人都可以建议我进行更改以实现平稳过渡... 提前致谢! :)

Answer 1

首先，一个不相关的提示 - 稍微更新一下 jQuery 是个好主意(如果没有任何东西依赖于您正在使用的旧版本)。 live 将不可用，您需要将其替换为 .on，但除此之外这是一个好主意。

其次，听起来您所需要的只是提供隐藏和显示一些过渡。您只需用 fadeIn() 和 fadeOut() 替换它们即可。您还可以使用 toggle 一次性完成所有操作(尽管与悬停一起使用时可能会出现错误，因为它会疯狂翻转)。

这里有一个小片段，向您展示它们的工作原理:

$(document).ready(function() {
  

  var img = $('img');
  
  $('#show').on('click', function() {
   	 img.fadeIn();
  });
  
  $('#hide').on('click', function() {
    	img.fadeOut();
  });
  
  $('#toggle').on('click', function() {
  	img.fadeToggle();  
  });
  
  
});

* { font-family: sans-serif; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="show"> Show me! </button>

<button id="hide"> Hide me! </button>

<button id="toggle"> Toggle me! </button>

<br>
<br>
<img src="http://www.randomwebsite.com/images/head.jpg" />

当然，这些只是使用 .animate 功能的快捷函数，它本身就非常灵活。 Here's a link您可以在其中阅读有关 jQuery 中的效果和动画以及如何使用它们的更多信息