从右侧滑入div

我的Shopify主题中有以下代码。从右侧滑入div

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

来源

2014-10-08 Vemund Eldegard

我真不没有得到你想要的东西，请更多地解释它。问题在哪里，你想要什么？你有什么？ – 2014-10-08 20:36:02

你好。抱歉。我想让显示或隐藏功能“setVisibility”的链接滑入和滑出时显示的div，而不仅仅是显示或隐藏。 @ShirinAbdolahi – 2014-10-08 20:40:37

你可以使用jQuery吗？ – 2014-10-08 20:43:59

您可以使用隐藏的CSS类，它应该从一开始就加入：以过渡

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

和类：

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

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

来源

2014-10-08 20:47:58

如果使用shopify主题会有jQuery的available.So是否有可能这会为你工作： http://jsfiddle.net/csdtesting/sy2upvjb/

$('#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>

来源

2014-10-08 20:54:25

我看到小提琴的作品。但是我无法在Shopify中使用它？ – 2014-10-08 21:16:00

你必须检查jQuery的shopify thme。看看这里，如果你想使用jquery https://ecommerce.shopify.com/c/ecommerce-design/t/jquery-not-work-with-shopify-49409。但如果有人建议另一种方式，你必须尝试纯js.Its你的选择。 – 2014-10-08 21:20:28

http://jsfiddle.net/f18h73ec/这里是我的商店的头。 jquery在那里添加了三次左右。怎么了？ @johngrivas – 2014-10-08 21:34:31

从右侧滑入div

回答

相关问题