تغییر Position یک Div با جاوا اسکریپت

[siros1983]

سلام دوستان
من یه دکمه دارم و یه Div
میخوام وقتی روی دکمه کلیک میکنم اگه Div من left=0 بود کلاس .show و اگه left=100px بود کلاس Hide به div اضافه کنه تا دایو مخفی و نمایان بشه البته میخوام این عمل با Transition انجام بشه

کسی میدتونه کدشو برام بنویسه؟
من اینو نوشتم کار نکرد




<style>
#menu{
background-color:blue;
width:100px;
height:200px;
}

.showmenu{
background-color:red;
width:50px;
}

.hidemenu{
background-color:gold;
width:100px;
}
</style>

کد دکمه
<button onclick="showhide();">Click</button>
<div id="menu"></div>




جاوا اسکریپت
<script>
function showhide() {
var menubtn = false;
if(menubtn == false){
document.getElementById('menu').classList.add('sho wmenu');
document.getElementById('menu').classList.remove(' hidemenu');
menubtn = !false;
} else {
document.getElementById('menu').classList.remove(' showmenu');
document.getElementById('menu').classList.add('hid emenu');
menubtn = !true;
}
}
</script>

[دانیال دزفولی]

css:

#menu{
background-color:blue;
width:100px;
height:200px;
opacity:0;
visibility: hidden;
transition: .3s;
}
#menu.show{
opacity: 1;
visibility: visible;
}

jquery:
$(function(){
$('button').click(function(){
_left = $('#menu').position().left;
if( _left === 100 )
$('#menu').addClass('show');
else if( _left === 0 )
$('#menu').removeClass('show');

});
})

[siros1983]

css:

#menu{
background-color:blue;
width:100px;
height:200px;
opacity:0;
visibility: hidden;
transition: .3s;
}
#menu.show{
opacity: 1;
visibility: visible;
}

jquery:
$(function(){
$('button').click(function(){
_left = $('#menu').position().left;
if( _left === 100 )
$('#menu').addClass('show');
else if( _left === 0 )
$('#menu').removeClass('show');

});
})

داداش ممنون ولی با جی کئوری نوشتی
امکانش هست با جاوا اسکریپت بنویسید؟ چون تاکید شده با جاوااسکریپت باشه