悬停时使用显示/隐藏 jquery 函数平滑过渡

smooth transition with show/hide jquery functions on hover?

本文关键字：函数 jquery 平滑 隐藏 显示 悬停      更新时间：2023-09-26

我正在使用图像映射，当图像的某些部分悬停时，它会显示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);
    });
});

任何人都可以向我建议更改以实现平稳过渡......提前感谢！:)

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

其次，听起来你正在寻找的只是给hide和show一些过渡。您可以简单地将它们替换为 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功能的快捷方式功能，该功能本身非常灵活。这是一个链接，您可以在其中阅读有关jQuery中的效果和动画以及如何使用它们的更多信息。

呼应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>

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>

相关文章：