jquery - 用jquery从左到右平滑滑动元素？

Question

请看这个小提琴

http://jsfiddle.net/rabelais/43J77/1/

$('#contact').click(function () {
    $('#contact-info').animate({
        width: 'toggle'
    });
    $('#work-menu').fadeOut('100');
});
$('#menu').click(function () {
    $('#work-menu').animate({
        width: 'toggle'
    });
    $('#contact-info').fadeOut('100');
});

单击时，菜单从侧面平滑滑动。当单击工作时，菜单会打开，但它不会像电子邮件元素那样滑动。有谁知道如何让工作菜单像电子邮件元素一样打开。

谢谢

Answer 1

看看这个：http: //jsfiddle.net/43J77/4/

我改变了width你的#work-menu并添加了这种#work-menu ul风格：

#work-menu {
    position: fixed;
    bottom: 37px;
    left: 65px;
    font-size: 24px;
    width: 183px;  /*changed*/
}
#work-menu ul{  /*added*/
    float:right;
}

不同之处在于，在其中一个切换元素中，文本与左侧对齐（电子邮件）并且您正在向左滑动，这会导致该效果，而在另一个中，列表与左侧对齐但您正在滑动正确的。这样，文本似乎没有移动，而只是出现。

为了创建相同的视觉效果，我只是将列表向右对齐，为此，我必须width为父元素定义 a。