悬停时使用show/hide jQuery函数实现平滑过渡？

Question

悬停时使用show/hide jQuery函数实现平滑过渡？

3

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

});

请问有人能为我建议平滑转换的更改吗...提前感谢！:)

- newbie

1

"live" 已经非常过时了。你正在使用哪个版本的 jQuery？ - yuvi

@yuvi jquery-1.6.4.min.js - newbie

给你的 show() 和 hide() 添加过渡持续时间，例如 show(500)。 - Amin Jafari

@AminJafari 我希望它在用户光标停留在该区域的时间内显示！show(500)将使其在500毫秒后消失。 - newbie

抱歉，我误解了！ - Amin Jafari

@AminJafari 没问题！ :) - newbie

3个回答

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>

- user9277191

3

回应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:

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>

- HeadCode

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yuvi · Accepted Answer

首先，一个无关的提示 - 如果没有任何依赖于你使用的旧版本，更新一下jQuery会是个好主意。 live 不再可用，相反你需要使用 .on 来替换它，但其他方面是个好主意。

其次，听起来你要做的就是给 hide 和 show 加上一些过渡效果。你可以简单地将它们替换为 fadeIn() 和 fadeOut()。你也可以使用 toggle 它可以一次性完成所有操作（虽然与鼠标悬停一起使用时可能会出现问题，因为它会疯狂地翻转）。

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

当然，这些只是使用.animate功能的快捷函数，而.animate本身已经相当灵活了。这里有一个链接，您可以在其中了解更多关于jQuery中效果和动画以及如何使用它们的信息。