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，否则这是一个好主意。

其次，听起来像你正在寻找的是给hide和show一些过渡。您只需使用fadeIn()和fadeOut()替换它们即可。你也可以使用toggle同时完成所有操作（虽然在悬停时使用时可能行为异常，因为它会像疯了一样翻转）。

这是一个小片段，向您展示它们的工作原理：

＆＃13;

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

＆＃13;

* { font-family: sans-serif; }

＆＃13;

<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" />

＆＃13;

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

Answer 2

回应yuvi所说的，'live'功能已被弃用。

我不确定为什么你的悬停功能在一个对象中，但你也可以这样做，使用fadeTo：

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('#'+ id).fadeTo(1000, 1.0);
        } else {
            $('#'+ id).fadeTo(1000, 0);
        }
    }
};

$(function() {
    $('.area').bind('mouseover mouseout', function(event){
         mapObject.hover($(this), event);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div>
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>

Answer 3

function smooth(){
			if($("#show").is(":visible")){
				$("#show").hide("1000");
			}
			else{
				$("#show").show("1000");
			}
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href = "#" onclick = "smooth()">Click me</a><br><br>
<h1 id = "show">Shown!</h1>

在悬停时使用show / hide jquery函数进行平滑过渡？

3 个答案: