Jquery animate(). Что-то не дошло... - JavaScript, Ajax

D-Snaker · 12.01.2012, 13:31

Доброго времени суток.

Начал ковырять квари, но застрял на простейшем примере - нажать на квадрат (обычный див с классом) - квадрат, допустим, уехал вправо и поменял цвет. Нажал на этот же квадрат снова - вернулось всё на свои места. Помогите пожалуйста разобраться.

Стили такие:

Код HTML:

.box {width: 100px; height: 200px; background: red; position: relative;}
.moved { background: green; }

а вот скрипт:

Код HTML:

$(document).ready(function(){
    
     $(".box").click(function(){
        $(this).animate({left: 200},'slow');
        $(this).addClass('moved').removeClass('box');
    });
    
    $(".moved").click(function(){
        $(this).animate({left: 500},'slow');
        $(this).addClass('box').removeClass('moved');
    });
    
    });

В моем понимании должно быть так - кликнули, box отъехал и сменил класс (это собственно и происходит)
А вот на второй клик не происходит ничего, хотя класс, судя по цвету, объект поменял...

Lesha · 12.01.2012, 21:46

события на объекты с классом .moved не назначены, так как таких элементов ввобще нет.
а от того что присваивается новый класс к элементу это никак не меняет текущее положение вещей.

посему:

Код HTML:

<html>
<head>
<script src="http://jqbook.narod.ru/jquery-1.2.6.js"></script>
<script>
$(document).ready(function(){
    
     $(".box").click(function(){
		if ($(this).hasClass('moved')) {
			 $(this).animate({marginLeft: '-=200px'},'slow');
			 $(this).removeClass('moved');
		} else {	
			$(this).animate({marginLeft: '+=200px'},'slow');
			$(this).addClass('moved');
		}
    });
    
    
    });
</script>

<style>
.box {width: 100px; height: 200px; background-color: #FF0000;}
.moved { background: green; }
</style>
</head>

<body>

<div class="box">&nbsp;</div>
<p>
<div class="box">&nbsp;</div>
<p>
<div class="box">&nbsp;</div>
<p>
<div class="box">&nbsp;</div>
<p>
<div class="box">&nbsp;</div>

D-Snaker · 13.01.2012, 08:41

Благодарю Lesha, но, если честно, причина такой конструкции осталась несколько призрачной)) буду разбираться

Naive · 13.01.2012, 09:52

Мысли как интерпретатор браузера:

Код:

$(document).ready(function(){ // Структура документа выстроена, все дом-узлы созданы, поехали
    
     $(".box").click(function(){ // ищем все элементы с классом box, нашли один. Для него создаем обработчик - реакция на нажатие клавиши.
        $(this).animate({left: 200},'slow'); // для всех (в данном случае конкретно этого) элементов создаем анимацию
        $(this).addClass('moved').removeClass('box'); // для всех добавляем класс мовед и удаляем бокс
    });
    
    $(".moved").click(function(){ // ищем элемент с классом мовед (а таких-то и нет на мемент создания документа)
        $(this).animate({left: 500},'slow');
        $(this).addClass('box').removeClass('moved');
    });
    
    });

итого при каждом клике будет срабатывать только первое событие.

12.01.2012, 13:31	#1
D-Snaker Пользователь Регистрация: 07.08.2008 Сообщений: 34	Jquery animate(). Что-то не дошло... Доброго времени суток. Начал ковырять квари, но застрял на простейшем примере - нажать на квадрат (обычный див с классом) - квадрат, допустим, уехал вправо и поменял цвет. Нажал на этот же квадрат снова - вернулось всё на свои места. Помогите пожалуйста разобраться. Стили такие: Код HTML: .box {width: 100px; height: 200px; background: red; position: relative;} .moved { background: green; } а вот скрипт: Код HTML: $(document).ready(function(){ $(".box").click(function(){ $(this).animate({left: 200},'slow'); $(this).addClass('moved').removeClass('box'); }); $(".moved").click(function(){ $(this).animate({left: 500},'slow'); $(this).addClass('box').removeClass('moved'); }); }); В моем понимании должно быть так - кликнули, box отъехал и сменил класс (это собственно и происходит) А вот на второй клик не происходит ничего, хотя класс, судя по цвету, объект поменял...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
JQuery	ser70	JavaScript, Ajax	2	16.08.2010 16:39
Изображение в animate	messi013	Общие вопросы Delphi	1	23.01.2010 00:53
jQuery itself	spein	JavaScript, Ajax	4	25.12.2009 22:30
animate	blackstersl	Общие вопросы Delphi	4	05.10.2008 11:27
Компонент Animate	Stark[SG!]	Компоненты Delphi	6	16.05.2007 11:56

13.01.2012, 08:41	#3
D-Snaker Пользователь Регистрация: 07.08.2008 Сообщений: 34	Благодарю Lesha, но, если честно, причина такой конструкции осталась несколько призрачной)) буду разбираться