| skillful |
23.06.2014 20:36 |
animate не работает после срабатывания DOM
Собственно как сделать, чтоб при клике по ссылке появлялся квадрат плавно сменившийся на другой цвет...
<html>
<head>
<title>backgroundColor</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script>
function at_first_click()
{
$('#result').html("<div class=\"block\" id=\"block\">100x100</div>");
$('#result').animate({backgroundColor: '#FF0000'}, 3000); //не работает...
}
function changeColor()
{
$('#block2').animate({backgroundColor: '#FF0000'}, 3000);
}
</script>
<style>
.block{
width: 100px;
height: 100px;
background-color: #58B400;
position: absolute;
top: 100px;
left: 100px;
}
.block2{
width: 100px;
height: 100px;
background-color: #ff7;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<a href="#" id = "at_first_click" onClick = "at_first_click()">Если кликнуть сюда, то появится зеленый квадрат, который должен через 3 сек. сменить свой цвет на красный</a>
<p>А если кликнуть на желтый квадрат, то в течении 3 сек. он станет красным</p>
<div id="result"></div>
<div class = 'block2' id = "block2" onClick = "changeColor()"></div>
</body>
</html>
|