Javascript 在不使元素消失的情况下切换marginTop

我已经编写了一个很酷的小脚本，它将使用jqueryui显示我的搜索框。但是，搜索框上方的链接也必须以相同的速度向上移动。为此，必须调整页边距顶部，但通过切换页边距顶部，它似乎正在消失

有人知道我如何在不使链接消失的情况下切换边距顶部，并使速度尽可能接近另一个吗

$(document).ready(function() {
    $('.pwcustomsearch').hide();
    $("#pwcustomsearchlink").click(function () {
        var effect = 'slide';
        var options = { direction: 'down' };
        var duration = 400;
        $('.pwcustomsearch').toggle(effect, options, duration);
        $('.social-media').toggle({"marginTop": "15px"});
    })
});

这是一把小提琴：

.toggle（）

正在将

显示：无

作为内联样式添加到元素中，因此它将消失

使用

.animate（）

来更改上边距

在这里查看我更新的小提琴：

---

编辑：再次更新小提琴以使切换正常工作。

谢谢，但我使用toggle（）的原因是再次单击后可以将顶部链接切换回原位。你知道怎么做吗？