用Scriptaculous向上缩放元素

Question

我正在使用Prototype/Scriptaculous构建一个小菜单项。

我已经设置的小测试在菜单项上使用了Effect.Scale。当您在菜单项上悬停时，我希望该项目向上伸缩，并将其他元素向上推。

我已经将ul.nav设置为一个特定的高度，但是缩放的元素似乎是绝对定位的，因此它从流中移除，并向下扩展到盒外。

有办法这样做吗?还是我做错了？以下是页面：已删除，-invalid URL -invalid

CSS：

.menuitem {
border: 1px solid black;
width: 90px;

}

  .lift {
display: block;
background-color: gray;
width: 90px;
height: 1px;

}

 .nav {
border-bottom: 1px solid black;
height: 60px;

}

javascript：

$$('.menuitem').each(function(s){
if($(s).down(1).tagName == 'SPAN' && $(s).down(1).className == 'lift') {
    var lift = $(s).down(1);
    $(s).observe('mouseenter', function() {
        new Effect.Scale(lift, 120, {
            scaleX: false,
            scaleY: true,
            scaleContent: false,
            scaleMode: { originalHeight: 100 },
            scaleFrom: 1
        })
    });
}

})

谢谢!富足

Answer 1

在Effect.Morph方面，我总是比Effect.Scale成功得多。它给你更好的控制。