Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2012, 01:05
Новичок на форуме
Отправить личное сообщение для Ser12345678 Посмотреть профиль Найти все сообщения от Ser12345678
 
Регистрация: 17.07.2012
Сообщений: 2

Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно
Всем привет!
Вообщем мне надо сделать, чтобы блок при нажатии на кнопку один раз перемещался из точки а в точку б, а при повторном нажатии возвращался обратно и так до бесконечности. Я сделал первую часть, но дальше никак
Перепробовал кучу способов, но ничего не помогает. ПОМОГИТЕ!!!
Вот сами блоки и стили:
#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);
});
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2012, 01:32
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

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

Последний раз редактировалось Deff, 17.07.2012 в 01:59.
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2012, 11:18
Новичок на форуме
Отправить личное сообщение для Ser12345678 Посмотреть профиль Найти все сообщения от Ser12345678
 
Регистрация: 17.07.2012
Сообщений: 2

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии появляется блок Изучаю_JS Общие вопросы Javascript 12 22.07.2015 16:26
Если один уже открыт и при нажатии на ссылку два первый блок скрывался и открывался ybiza Элементы интерфейса 3 16.12.2010 21:24
Открыть в новом окне, а при повторном нажатии обновить то же старое-новое окно libinstyle Events/DOM/Window 2 05.04.2010 19:13