Question

嘿，我有一个JSFiddle，我想在这里完成什么＆gt; JSFIDDLE CODE

问题在于，我不确定如何在打开时以及在缩小到较小的正方形时使其具有弹性效果。然而，一旦你将鼠标悬停在它上面，它现在会变得疯狂：o）。当它重新调整尺寸时，它似乎也将文本推向内部。无论盒子的形状如何，我怎么能让文本看起来一样？

JS代码：

$('#menuSquare').mouseover(function() {
    $('#menuSquare').animate({
        width: "95",
        height: "400",
        padding: '20',
        opacity: 0.8
    }, 1000)
});

$('#menuSquare').mouseout(function() {
    $('#menuSquare').animate({
        width: "20",
        height: "20",
        opacity: 0.4
    }, 1000)
});

HTML：

<div id="menuSquare" class="TheMenuBox">
      <p><a href="#" style="text-decoration:none; color:#666;">Category 1</a></p>
      <p><a href="#" style="text-decoration:none; color:#666;">Category 2</a></p>
      <p><a href="#" style="text-decoration:none; color:#666;">Category 2</a></p>
</div>

CSS：

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#666;
}
body {
    background-color: #0CF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.TheMenuBox {
    position:absolute; 
    background-color:#FFF; 
    width: 20px; /* 95 */
    display:block; 
    height: 20px;
    top:16px; 
    left:260px; 
    opacity:0.40; 
    filter:alpha(opacity=40); 
    z-index:1000; 
    padding:0px; /* 20 */
    text-transform:uppercase; 
    text-decoration:none;
    overflow: hidden;
}

有人可以帮帮忙吗？

Answer 1

你只需要将盒子的内容设置为绝对 - 我是通过将内容包装在一个名为inner

的类的div中来实现的。

.inner {position:absolute;top:20px;left:20px; width:95px;}

并在.animate调用之前添加.stop（）以阻止它们触发，而另一个尝试以相反的方式设置动画。

$('#menuSquare').stop().animate({

看我的小提琴... http://jsfiddle.net/HRGKq/9/

马特

具有弹性效果的CSS div box动画

1 个答案: