Question

这是代码，我想要顺利删除悬停图像。实际上，当我悬停一张图像时，会显示较大版本的图像。然后我徘徊，然后更大的图像突然消失了。但是我想让这个更大的图像顺利进行。我尝试使用.hide（2000）方法，但它第一次悬停。但在另一个时间，较大的图像没有消失。所以我希望得到你的帮助。

html代码

    <a href="oneTN.jpg"><img src="one.gif" alt="some text"></a>
    <a href="twoTN.jpg"><img src="two.jpg" alt="some text"></a>
    <a href="threeTN.jpg"><img src="three.jpg" alt="some text"></a>

jQuery代码

 $(function() {
    $('a').hover(function(e) {
      var href= $(this).attr('href');
      $('<img id="larger" src="'+ href +'" />').css('top', e.pageY + 20).css('left', e.pageX + 20).appendTo('body');
 }, function() {
      $('#larger').stop().remove();
   });


   $('a').mousemove(function(e) {
      $('#larger').css('top', e.pageY + 20).css('left', e.pageX + 20);
    });
 });

Answer 1

这可能是你想要的？ http://jsfiddle.net/7xb2vc14/2/

实际上我刚刚添加了fadeIn() - fadeOut()函数，并稍微改变了javascript css部分的编写方式。

$(function() {
    $('a').hover(function(e) {
      var href= $(this).attr('href');
      $('<img id="larger" src="'+ href +'" />')
          .fadeIn(3000)
          .css({
            'top' : e.pageY + 20,
            'left' : e.pageX + 20})
          .appendTo('body');
 }, function() {
      $('#larger').stop().fadeOut( "slow", function() {
            $(this).remove();
  });
});


   $('a').mousemove(function(e) {
      $('#larger')
          .css({
                'top' : e.pageY + 20,
                'left': e.pageX + 20
          });
    });
 });

您刚刚要求an image to be gone smoothly，所以我认为fadeOut()可以解决问题。但是你的函数获取图像意味着它加载图像然后它再次删除它可能必须这样做几次，也许你正在加载非常大的图像，所以它很糟糕。想象一下，如果有人试图在带宽较低的移动设备上加载页面。

长话短说：如果你可以添加一个隐藏的图像，然后谷歌jquery show(), hide(), toggle()，那么图像加载ONCE并保留在DOM中，你所做的就是显示和隐藏它。但是不要将其删除并重新加载。

如何通过.hide（2000）方法平滑地删除悬停图像？

1 个答案: