使用jQuery在悬停/移出时展开/收缩div

我正在寻找一个

jQuery

插件来扩展

div

元素，以便在悬停时显示它们的溢出（如果有）。说明：

插件应该在相对定位的

div

上工作（我猜这意味着您创建了

div

的副本，将其定位设置为绝对，然后确定放置位置）

有这样的插件吗？你不需要插件。 只需添加适当的css并使用jQuery动画：

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})​

---

此处缺少图像。。。但几年前我就是这样做到的。基本理论是，所有图像/div的任何内容都是绝对的，在它们自己的相对区域内。然后，我设置

左上方

位置的动画，两个位置都是

-负向

。这使得它们突出在周围的盒子上，看起来像是在弹出。（当然，您还需要确保此项的z指数高于其周围的指数）

我对这两件事的风格是：

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   background:#f1f1f1; 
   width:90px; 
   height:90px; 
}

---

实际上，你完全可以用css来做这件事，这是我的一个网站上的一个snipet，我实在太懒了，无法编辑它，但是你知道了：

<ul class="hover">
  <li style="margin-top:40px;"">
   <a href=""><img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/>
   <img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/></a>
  </li>
  <li style="margin-left:55px; margin-top:-20px;">
   <a href=""><img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/>
   <img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/></a>
  </li>
</ul>

---

这里有一些不需要的样式，但是你还是明白了。基本上，你只是在原作的上方显示一幅图像，悬停在@MarkPieszak上。对于动态创建的元素，使用

$(document).on({
  mouseenter: function () {
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
  },
  mouseleave: function () {
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
  }    
}, '.img a img');

---

.hover（）

仅对静态元素有效。更多

如果它是文本，它会稍微复杂一些

我是这样使用它的：

$('.floating').mouseenter(function(){
  const $this = $(this);
  const dimension = $this.data('dimension');
  const ratioEnlarged = 2;

  const tempElement = $this.clone();
  tempElement.appendTo('body');
  tempElement.css({
    width: dimension.width,
    height: dimension.height
  });

  if(tempElement.is(':offscreen')){
    // Change this to animate if you want it animated.
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/2,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  } else {
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/4,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  }

  tempElement.remove();
});

$('.floating').mouseleave(function(event) {
  const $this = $(this);
  const dimension = $this.data('dimension');

  if(!$this.hasClass('context-menu-active')){
    $this.css({
      margin: 0,
      'font-size': '1em',
      width: dimension.width,
      height: dimension.height
    });
  }
});

---

内容是什么？具有不可预测渲染的图像和/或文本/更多div？有固定的纵横比吗？没有足够的信息…非常好。我刚刚在动画之前添加了

.stop（true，true）

，因为它取消了之前元素的动画，并改善了视觉效果。我认为：啊，是的，肯定有一些小的改进可以做，大约两年前就做了！当时我花了一段时间才弄明白，希望我的汗水和眼泪是值得的：P哈哈。。。为什么您要有效地重新发明jQuery UI效果“缩放”？@Specializet scale无法以完成此演示所需的方式工作。@MarkPieszak回答得很好！但是有没有可能通过.on（）完成呢？用于动态创建的元素。谢谢这应该是我的首选答案，因为这样一个精简的代码。@tborychowski非常优雅的永恒代码+我对这个解决方案投了赞成票，我同意这两个意见（也投了赞成票）。现在，我正试图将您的解决方案从一个表转换为一个无表（甚至更简单、更干净）的html元素版本，但我陷入了困境：您能看看我在转换过程中忽略了什么吗？谢谢这是：因为您使用了自定义html标记，所以默认情况下它们不是

display:block

。因此，您只需在

项目

标记上设置它，它就可以工作了。此外，现在不需要任何js，只需要纯css转换：-）

$(document).on({
  mouseenter: function () {
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");
  },
  mouseleave: function () {
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");
  }    
}, '.img a img');

$('.floating').mouseenter(function(){
  const $this = $(this);
  const dimension = $this.data('dimension');
  const ratioEnlarged = 2;

  const tempElement = $this.clone();
  tempElement.appendTo('body');
  tempElement.css({
    width: dimension.width,
    height: dimension.height
  });

  if(tempElement.is(':offscreen')){
    // Change this to animate if you want it animated.
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/2,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  } else {
    $this.css({
      'margin-left': -dimension.width * ratioEnlarged/4,
      'margin-top': -dimension.height * ratioEnlarged/4,
      'font-size': ratioEnlarged + 'em',
      width: dimension.width * ratioEnlarged,
      height: dimension.height * ratioEnlarged
    });
  }

  tempElement.remove();
});

$('.floating').mouseleave(function(event) {
  const $this = $(this);
  const dimension = $this.data('dimension');

  if(!$this.hasClass('context-menu-active')){
    $this.css({
      margin: 0,
      'font-size': '1em',
      width: dimension.width,
      height: dimension.height
    });
  }
});