Форум

gpg10 · #1 (**permalink**) 18.03.2014, 16:19

<!DOCTYPE html>
<html>
<head>
<style>
#ss {
top:120px;
position : relative;

}

#block {

  background-color: #bada55;
  width: 100px;
  border: 1px solid green;
  
}
p {

background-color: #FFEFD5;
  width: 300px;
  height: 100px;
  border: 1px solid green;
position : absolute;


}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="jquery.color-2.1.2.min.js"></script>
<script src="jquery.easing.1.3.js"></script>


</head>
<body>
<p>Click ME</p>
<div id='ss'>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
</div>
<script>
jQuery("#go").click(function(){
  jQuery("#block").animate({
      backgroundColor: "#FFFF00"
  }, 1500 );
});
jQuery("#sat").click(function(){
  jQuery("#block").animate({
      backgroundColor: jQuery.Color('#7FFF00') 
  }, 1500 );
});
</script>
<script>

jQuery("#go").click(function(){
  jQuery("#block").animate({
      backgroundColor: "#FFFF00"
  }, 1500 );
});
jQuery("#sat").click(function(){
  jQuery("#block").animate({
      backgroundColor: jQuery.Color('#7FFF00') 
  }, 1500 );
});


var cl=true;

$( 'p' ).click(




function(e) {

  if(cl){

 $(this).animate({  top: '-=10px' , 
 left:'100px',
 width:'300px',
  backgroundColor:"#54FF9F"
 }, 3000, 'easeInElastic', function () {});
 
$('#ss').animate({top: '-=10px' , 
 left:'100px',
 width:'200px'},3000,'easeInElastic' ).queue( 'false');

//$('p').unbind('click');//

cl=false;
  } else {
 
 
 

 $(this).animate({  top: '+=10px' , 
 left:'-=100px',
 width:'300px',
  backgroundColor:"#FFFFFF"
 }, 3000, 'easeInElastic', function () {});
 
$('#ss').animate({top: '+=10px' , 
 left:'-=100px',
 width:'200px'},3000,'easeInElastic' ).queue( 'false');

 cl=true;

  }
 
 }

 );




	
</script>

</body>
</html>

animhotep · #2 (**permalink**) 18.03.2014, 16:43

заменить jQuery на $

danik.js · #3 (**permalink**) 18.03.2014, 17:53

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript