|
Сообщение от animhotep
|
|
заменить jQuery на $
|
Предлагаю вообще убрать ))
<!DOCTYPE html>
<html>
<style>
#block {
background-color: #bada55;
width: 100px;
border: 1px solid green;
transition: all 1.5s;
}
#block.state1{
background-color: #FFFF00;
}
#block.state2{
background-color: #7FFF00
}
#floating{
position : absolute;
transition: all 3s;
top: 0;
left: 0;
}
#floating p{
background-color: #FFEFD5;
width: 300px;
height: 100px;
border: 1px solid green;
transition: all 3s;
}
#floating.state1 p{
background-color: #FFFFFF;
}
#floating.state2{
top: -10px;
left: 100px;
}
#floating.state2 p{
background-color: #54FF9F;
}
</style>
<div id="floating">
<p id="toggler">Click ME</p>
<div id='ss'>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
</div>
</div>
<script>
toggler.onclick = function() {
floating.className = floating.className === 'state2' ? 'state1' : 'state2';
};
go.onclick = function() {
block.className = 'state1';
};
sat.onclick = function() {
block.className = 'state2';
};
</script>
</html>