Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно
Всем привет!
Вообщем мне надо сделать, чтобы блок при нажатии на кнопку один раз перемещался из точки а в точку б, а при повторном нажатии возвращался обратно и так до бесконечности. Я сделал первую часть, но дальше никак :( Перепробовал кучу способов, но ничего не помогает. ПОМОГИТЕ!!! Вот сами блоки и стили:
#chatBODY {
width: 350px;
height: 400px;
background-color: #eaeaea;
position: fixed;
z-index: 8;
right: -300px;
top: 175px;
margin: 0px 0px 0px 0px;
border: 1px solid #d5d5d5;
}
#showchatBtn {
width: 50px;
height: 100%;
background-color: #c8c8c8;
position: relative;
z-index: 9;
}
#chat {
position: absolute;
height: 400px;
width: 300px;
top: 0px;
right: 0px;
}
<div id="chatBODY"><div id="showchatBtn">1</div><div id="chat"></div></div>
А вот скрипт:
$('#showchatBtn').click(function(){
$("#chatBODY").animate({"right":"-250px"}, 600);
$("#chatBODY").animate({"right":"0px"}, 600);
});
|
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#chatBODY {
width: 350px;
height: 400px;
background-color: #eaeaea;
position: fixed;
z-index: 8;
right: -300px;
top: 175px;
margin: 0px 0px 0px 0px;
border: 1px solid #d5d5d5;
}
#showchatBtn {
width: 50px;
height: 100%;
background-color: #c8c8c8;
position: relative;
z-index: 9;
}
#chat {
position: absolute;
height: 400px;
width: 300px;
top: 0px;
right: 0px;
}
</style>
<div id="chatBODY"><div id="showchatBtn">1</div><div id="chat"></div></div>
<script type="text/javascript">
$('#showchatBtn').not('.Active').click( function() {
$("#chatBODY").stop(true,true)
$("#chatBODY").animate({"right":"0"},600,"linear", function(){$('#showchatBtn').addClass('Active')});
});
$('#showchatBtn.Active').live('click', function() {
$("#chatBODY").stop(true,true)
$("#chatBODY").animate({"right":"-300px"}, 600, "linear",function() {$('#showchatBtn').removeClass('Active')});
});
</script>
|
Спасибо!
|
| Часовой пояс GMT +3, время: 09:16. |