badnaruto
New Member
- Регистрация
- 28.03.2012
- Сообщения
- 2
Смысл такой. Есть 2 блока, у каждого свой id и class, и им необходимо поменяться не только местами (сделать анимацию для этого не составило труда), а еще и классами.
Проблема в том, что toggleclass здесь нет смысла использовать, а пытаясь сделать по другому у меня получается криво =/
Прошу помощи в создание этого убогого скрипта :laugh:
Варианты, где они меняются не классами - тоже принимаются!!! :tongue:
Проблема в том, что toggleclass здесь нет смысла использовать, а пытаясь сделать по другому у меня получается криво =/
Прошу помощи в создание этого убогого скрипта :laugh:
Варианты, где они меняются не классами - тоже принимаются!!! :tongue:
Код HTML
Код CSS
Код jQuery
Код:
<!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>
Код:
@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}
Код:
// 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");
});
});
Вложения
-
46 КБ Просмотры: 53