Javascript 在悬停时显示/隐藏 jquery 功能的平滑过渡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25962080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
smooth transition with show/hide jquery functions on hover?
提问by newbie
I'm using an image map and when certain part of image is hovered it show div..(like in this website http://jquery-image-map.ssdtutorials.com/) I want the div to appear with smooth transitions... here is my js code
我正在使用图像地图，当图像的某些部分悬停时，它会显示 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);
});
});
Can anyone please suggest me the changes for smooth transitions... thanks in advance! :)
任何人都可以向我建议平滑过渡的更改...提前致谢！:)
回答by yuvi
So first of all, an unrelated tip - it would be a good idea to update jQuery a bit (if there isn't anything that depends on the old version you are using). livewon't be available, instead you'll need to replace it with .on, but otherwise it's a good idea.
所以首先，一个不相关的提示 - 稍微更新 jQuery 是个好主意（如果没有任何依赖于您使用的旧版本的东西）。live将不可用，您需要将其替换为.on，否则这是个好主意。
Secondly, sounds like all you're looking for is to give hideand showsome transition. You can simply replace them with fadeIn()and fadeOut(). You can also use togglewhich does it all at once (though might misbehave when used with a hover, because it will flip like crazy).
其次，听起来您正在寻找的只是给予hide和show一些过渡。您可以简单地将它们替换为fadeIn()和fadeOut()。您还可以使用togglewhich 一次完成所有操作（尽管在使用悬停时可能会出现行为不端，因为它会像疯了一样翻转）。
Here's a small snippet that shows you how they work:
这是一个小片段，向您展示了它们是如何工作的：
$(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" />Of course, those are just shortcut functions that use the .animatefunctionality, which is quite flexible on its own. Here's a linkwhere you can read more about effects and animations in jQuery and how you can use them
当然，这些只是使用该.animate功能的快捷功能，它本身就非常灵活。这是一个链接，您可以在其中阅读有关 jQuery 中的效果和动画以及如何使用它们的更多信息
回答by HeadCode
Echoing what yuvi said, the 'live' function is deprecated.
回应 yuvi 所说的，'live' 功能已被弃用。
I'm not sure why you have your hover function inside an object, but you could also do it like this, using fadeTo:
我不知道为什么你在一个对象中有你的悬停功能，但你也可以这样做，使用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>回答by HeadCode
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>