Javascript 从右侧滑入

我的Shopify主题中有以下代码

<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('opensign').value=='Hide Layer'){
document.getElementById('opensign').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('opensign').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>

我可以添加框以便从右侧滑入吗？方框代码如下：

<a href="#" id="opensign" onclick="setVisibility('sign');";>Sign In</a>
<div id="sign">
Blaslasd.
</div>

---

您可以使用css类进行隐藏，应该从一开始就添加：

.hide {
    left: 100%;
    opacity: 0;
}

和一个用于转换的类：

.animated {
    transition: left 1s;
    -webkit-transition: left 1s;
}

然后在javascript中添加和删除隐藏类。

---

您可以在codepen上看到一个演示。

如果您使用shopify主题，将有jquery可用。因此，如果可能，这将适用于您：

JS

css

---

我真的得不到你想要的。请多解释一下。问题出在哪里。你想要什么？你有什么？你好。很抱歉我想使带有函数setVisibility的链接在显示或隐藏时滑入滑出时显示的div，而不仅仅是显示或隐藏@ShirinAbdolahiI看到了小提琴的工作原理。但是我不能让它在Shopify中工作？你必须检查Shopify thme的jquery。如果您想使用jquery，请查看这里。但是如果有人建议你用纯js试试别的方法，那是你的选择。这是我店里的头像。Jquery在那里添加了三次左右。怎么了@因为如果您看到代码jquery.min.js出现三次！Keep onei保留“{{{//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”| script_tag}”

$('#sign').click(function () {
    if ($('#userNav').is(':hidden')) {
        $('#userNav').show('slide', {
            direction: 'right'
        }, 1000);
    } else {
        $('#userNav').hide('slide', {
            direction: 'right'
        }, 1000);
    }
});

a {
    color: #000;
    cursor:pointer;
    display:block;
}
#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

<a id="sign">right-to-left</a>
<div id="userNav">Blaslasd</div>