使用 jQuery 在悬停/退出时展开/缩小 div

Posted 2023-05-08

【中文标题】使用 jQuery 在悬停/退出时展开/缩小 div

【英文标题】：Expand / shrink div on hover / out with jQuery

【发布时间】：2012-08-16 22:07:33

【问题描述】：

我正在寻找一个jQuery 插件来扩展div 元素，以便在悬停时显示它们的溢出（如果有的话）。插图：

该插件应该在相对定位的div 上工作（我猜这意味着您创建了div 的副本，将其定位设置为绝对，然后找出放置它的位置）。

是否已经有这样的插件可用？

【问题讨论】：

内容是什么？具有不可预测渲染的图像和/或文本/更多 div？有固定的纵横比吗？没有足够的信息...

【参考方案1】：

您不需要插件。 只需添加适当的 css 并使用 jQuery animate：

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

demo here

【讨论】：

这应该是恕我直言的首选答案，对于这样的精简代码。

@tborychowski 真棒优雅的永恒代码！对此解决方案 +1 赞成，我同意这两个 cmets（也赞成那些）。现在我正在尝试将您的解决方案从表格转换为无表格（甚至更简单、更清洁）的 html 元素版本，但我被卡住了：jsfiddle.net/c15bpk30 你能看看我在这个转换中忽略了什么吗？谢谢！

这里是：jsfiddle.net/c15bpk30/1，因为您使用了自定义 html 标签，默认情况下它们不是 display: block。所以你只需要在你的project 标签上设置它就可以了。此外，这现在不需要任何 js，只需要纯 css 转换:-)

【参考方案2】：

这里的图片不见了……但这是我几年前完成的。基本理论是所有图像/ div 的任何东西都是绝对的，在它们自己的相对区域内。然后我为left & top 位置设置-negatively 的动画。这使它们突出于周围的盒子之上，看起来就像它们正在弹出一样。 （当然你还需要确保这个的 z-index 比它周围的高）。

jsFiddle DEMO

$(".img a img").hover(function() 
    $(this).closest(".img").css("z-index", 1);

    // this is where the popping out effect happens
    $(this).animate( height: "200", width: "200", left: "-=55", top: "-=55" , "fast");

, function() 
    $(this).closest(".img").css("z-index", 0);
    $(this).animate( height: "90", width: "90", left: "+=55", top: "+=55" , "fast");
);​

我对这两件事的风格是：

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


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

【讨论】：

非常好mcpDESIGNS。我刚刚在 animate 之前添加了.stop(true,true)，因为它取消了之前元素的动画并改善了我认为的视觉效果：jsfiddle.net/tdsNF/2

啊，是的，肯定有一些小的改进，大约 2 年前就做到了！当时花了我一段时间才弄清楚，希望我的汗水和眼泪值得：P哈哈

...您为什么要有效地重新发明 jQuery UI 效果“缩放”？

@specializt Scale 无法以完成此演示所需的方式工作。

@MarkPieszak 很好的答案！但是有没有可能通过.on（）来实现？对于动态创建的元素。谢谢

【参考方案3】：

感谢@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() 仅适用于静态元素。更多here

【参考方案4】：

您实际上可以完全使用 css 来完成此操作，这是我网站上的一个片段，我完全懒得编辑它，但您明白了：

<ul class="hover">
  <li style="margin-top:40px;"">
   <a href=""><img src="images/Home/Home.jpg"  style="width:130px; height:100px;"/>
   <img src="images/Home/Home.jpg"  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"  style="width:200px; height:200px;"/>
   <img src="images/About/About.jpg"  class="preview" style="width:250px; height:250px;"/></a>
  </li>
</ul>

css:

/* begin hover */

.hover
cursor: default;
list-style: none;


.hover a .preview
display: none;


.hover a:hover .preview
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;


.hover img
background: white;
border-color: black;
border-style: solid;
border-width: 4px;
color: inherit;
padding: 2px;
vertical-align: top;
-moz-border-radius: 15px;
border-radius: 15px;


.hover li
background: black;
border-color: black;
border-style: solid;
border-width: 1px;
color: inherit;
display: block;
float: left;
margin: 3px;
padding: 5px;
position: relative;


.hover .preview
border-color:black;
border-width:8px;
border-stle:solid;


li
-moz-border-radius: 15px;
border-radius: 15px;

那里有一些不需要的样式，但同样，你明白了。基本上你只是在原始图像上显示一张图像，悬停

【参考方案5】：

如果是文字，就复杂一点……

我是这样使用的：

$('.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
    );
  
);