1

嘿，我有一个我想要在这里完成的工作的 JSFiddle > JSFIDDLE 代码

问题是我不确定如何在打开和关闭到较小的正方形时赋予它弹性效果。但是，目前一旦您将鼠标悬停在它上面，它就会变得疯狂: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;
}

有人可以帮忙吗？

4

1 回答 1

2

您只需要将框的内容设置为绝对 - 我通过使用名为 inner 的类将内容包装在 div 中来做到这一点

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

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

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

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

马特

于 2012-12-06T03:28:47.990 回答