Слайд div справа справа

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 добавьте и удалите класс hide.
Вы можете увидеть демо на codepen here.

Answer 2

Если вы используете Shopify тему будет JQuery available.So, если это возможно, это будет работать для вас: 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>