Проблема с обменом классами =/

Статус
Закрыто для дальнейших ответов.

badnaruto

New Member
Регистрация
28.03.2012
Сообщения
2
Смысл такой. Есть 2 блока, у каждого свой id и class, и им необходимо поменяться не только местами (сделать анимацию для этого не составило труда), а еще и классами.
Проблема в том, что toggleclass здесь нет смысла использовать, а пытаясь сделать по другому у меня получается криво =/
Прошу помощи в создание этого убогого скрипта :laugh:

Варианты, где они меняются не классами - тоже принимаются!!! :tongue:

Код HTML

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="css/block.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/block.js"></script>
</head>
<body>
<div id="content">
	<div class="b1" id="a1">1</div>
	<div class="b2" id="a2">2</div>
	<div class="b3" id="a3" style="background-color:#FFC">3</div>
	<div class="b4" id="a4">4</div>
	<div class="b5" id="a5" style="background-color:#FCF">5</div>
	<div class="b6" id="a6">6</div>
	<div class="b7" id="a7">7</div>
	<div class="b8" id="a8">8</div>
	<div class="b9" id="a9">9</div>
</div>
</body>
</html>
Код CSS

Код:
@charset "utf-8";
/* CSS Document */

body {background-color:#CCC; margin: 0}

#content {
width:900px;
height:900px;
background:#CFF;
margin:0;
padding:10px;
}

#Icontent {
width:920px;
height:920px;
margin:auto auto;
position:fixed;
border: 0;
}

#content div {
width:280px;
height:280px;
float: left;
margin: 10px;
position: fixed;
background-color:#CCC
}

#a1 {top: 10px; left: 10px}
#a2 {top: 10px; left: 310px}
#a3 {top: 10px; left: 610px}
#a4 {top: 310px; left: 10px}
#a5 {top: 310px; left: 310px}
#a6 {top: 310px; left: 610px}
#a7 {top: 610px; left: 10px}
#a8 {top: 610px; left: 310px}
#a9 {top: 610px; left: 610px}
#a0 {display:block}
Код jQuery

Код:
// JavaScript Document

$(document).ready(function(){
	$(".b3").click(function(){

		$(".b3")
.animate({height: "140", width: "140"}, "slow")
		.animate({top: "+=300", left: "-=300"}, "slow")
		.animate({height: "280", width: "280"}, "slow");


$(".b5")
.animate({height: "140", width: "140", top: "+=140", left: "+=140"}, "slow")
		.animate({top: "-=300", left: "+=300",}, "slow")
		.animate({height: "280", width: "280", top: "-=140", left: "-=140"}, "slow");

$(".b3").removeClass('b3')
.addclass("b0");
$(".b5").removeClass('b5')
.addclass("b3");
$(".b0").removeClass('b0')
.addclass("b5");

	});
});
 

Вложения

brevis

Well-Known Member
Регистрация
10.08.2010
Сообщения
452
Да в общем-то дело в опечатке -- вместо "addclass" нужно писать "addСlass":

$(".b3").removeClass('b3').addClass("b0");
$(".b5").removeClass('b5').addClass("b3");
$(".b0").removeClass('b0').addClass("b5");
 

badnaruto

New Member
Регистрация
28.03.2012
Сообщения
2
Да в общем-то дело в опечатке -- вместо "addclass" нужно писать "addСlass":
Спасибо огромное, но осталась одна проблема =/
Даже когда классы сменились - клик приводящий в действие скрипт проходит только по 3ему блоку, хотя на к 5ому блоку уже привязан class a3 =/
По сути смена блоками должна происходить по клику на не центральный блок (в данном случае угловой), а получается, что только по клику на 3ем блоке =/
 

czp

czp
Регистрация
05.06.2011
Сообщения
635
заново раздай клик, или меняй полностью местами блоки, так как , если не ошибаюсь, при считывание клика на какой класс, ДЖС просто считывает блок по классу, и потом привязывается к блоку а не к классу, классы поменял а блоки нет, это если я не ошибаюсь
 
Статус
Закрыто для дальнейших ответов.
Верх Низ