Question

我的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>

Answer 1

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

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

和过渡类：

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

然后在您的javascript中添加和删除隐藏类您可以在codepen here上看到演示。

Answer 2

如果您使用shopify主题，则会有jquery可用。如果可能，这将适合您： http://jsfiddle.net/csdtesting/sy2upvjb/

JS

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

CSS

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>

从右侧滑入div

2 个答案: