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

【问题标题】：Making a hidden sliding div appear behind link使隐藏的滑动 div 出现在链接后面
【发布时间】：2015-05-30 10:46:57
【问题描述】：

请看上面的小提琴。

有一个链接，当点击一个隐藏的 div 时，它会从右侧滑出。

隐藏的 div 包含一个图像。

此时隐藏的 div 滑出但出现在与“联系人”链接的距离处，然后当它向后滑动时，它在滑到“联系人”后面之前消失了。

我希望它看起来从“联系人”后面滑出，然后回到“联系人”后面，没有任何重叠。

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

【问题讨论】：

将#contact-info right css属性减少到90px；
#contact-info{right:90px;}
尝试调整css属性“right”。目前 right 属性设置为 160px。将其设置为 79 像素
喜欢jsfiddle.net/564yzug3/9 ?
对不起，我忘了说一旦 div 滑出，它需要设置在距离链接的这个距离，但不知何故看起来好像从后面滑出到距离右边的那个距离。

标签： javascript jquery html css

【解决方案1】：

你可以这样做：

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

查看Fiddle

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

我找到了一种方法，只需调整 css。 fiddle

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

【讨论】：