使隐藏的滑动div出现在链接后面

Question

小提琴

请参阅上面的小提琴。

有一个链接，单击该链接时，隐藏的div从右侧滑出。

隐藏的div包含图像。

此刻，隐藏的div滑出但与“联系人”链接相距一段距离，然后当它向后滑动时消失，然后在“联系人”后面滑动。

我希望它看起来像在“联系人”后面滑出表格，然后在“联系人”后面滑回而没有任何重叠。

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

Answer 1

您可以像这样：

var move = 80;
$('#contact').click(function () {
         move = move===80 ? 160 : 80;
    $('#contact-info').animate({right: move, width: 'toggle' });
});

检查小提琴

Answer 2

动画right属性。

$('#contact').click(function () {
    var right = '160px';
    if ($('#contact-info').is(":visible")) {
        right = '38px';
    }
    $('#contact-info').animate({width: 'toggle', right: right});
});

http://jsfiddle.net/RichAyotte/cs23vzjv/1/

Answer 3

我找到了一种方法，只需调整CSS即可。 小提琴

#contact {
background-color: #ffffff;
bottom: 34px;
padding-right: 38px;
position: fixed;
right: 0;
z-index: 1;
}
#contact-info {
bottom: 34px;
margin-right: -250px;
position: fixed;
right: 444px;
text-transform: lowercase;
white-space: nowrap;
 }