Javascript 使用Scriptaculous向上缩放元素

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

我设置的小测试使用菜单项上的Effect.Scale。我希望该项向上缩放，并在您将鼠标悬停在菜单项上时将其他元素一起向上推

我将ul.nav设置为特定高度，但缩放元素的位置似乎是绝对的，因此它从流程中移除，并在框外向下缩放

有没有办法做到这一点，还是我做错了？ 以下是网页： 已删除，-无效URL（）

CSS：

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

}

}

}

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
        })
    });
}

})

谢谢！

---

Rich

我在Effect.Morph方面总是比Effect.Scale更成功。它提供了更好的控制。

您发布的URL不起作用。请编辑或在评论中发布。当我使用Effect.Scale时，查看Effect.Morph帮助我找到了如何设置所需内容的方法。将导航设置为相对位置，将li设置为绝对位置是关键。

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

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