01 - Mouse hover en javascript + la console

Le but est de pouvoir déclencher une action sur un lien. Le résultat sera affiché dans la console du navigateur.

Pour cela aller dans les préfèrences de votre navigateur et trouver l'onglet développement.

Il y a donc deux actions:

onMouseMove -> quand la souris est en hover sur le lien.

onMouseOut -> quand la souris sort du lien.

console.log permet d'envoyer un message à la console du navigateur

<html>
<head>
<title>placer du code javascript</title>
<script>
	function mafonction (){
		
		console.log ("la souris est dans le jardin");
	}
	function annulemafonction (){
		console.log ("la souris est sortie du jardin");
	}

</script>
</head>
<body>
<a  href="#" onMouseMove="mafonction()" onMouseOut="annulemafonction()">un lien</a>
</body>
</html>

02 - Click de javascript + alert()

Cette fois, c'est une boite de dialogue qui va s'ouvrir et afficher un contenu: "ok".

alert("ok"); -> permet d'afficher cette boite de dialogue

<html>
<head>
<title>Click de javascript + alert()</title>
<script>
	function mafonction (){
		alert("ok")
	}
</script>
</head>
<body>
<a  href="#" onClick="mafonction()">un lien</a>
</body>
</html>

03 - Click() de Jquery

1/ on insère le lien vers le fichier Jquery

2/ on peut utiliser la fonction : onClick() dans le html.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
// 1 - on insere le jQuery ici 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	function mafonction (){
		alert("ok")
	}
</script>
<title>Click() de Jquery</title>
</head>

<body>
<a onClick="mafonction()" href="#"> lien </a> <br>
</body>
</html>

04 - Jquery et css()

example : 04- jquery + fonction.html

1/ on cible la div qui doit avoir le changement du css.Ici c'est la div #div1 qui est modifiée, et pour l'appeler on écrit: $("#div1")

2/ on utilise la fonction css() pour modifier le css que l'on veut. Dans les parenthéses on ajoutes l'atribut css à modifié ici la couleur de fond, mais on peut modifier tous les attributs css que l'on veut.

3/ on ajoute les deux de la maniére suivante

$("#div1").css("background","#4682B4")

J'ai ajouté en commentaire l'ancienne façon de nommer en javascript sans Jquery:

document.getElementById("div1").style.backgroundColor = "#4682B4";

Jquery permet d'écrire plus facilement le code .

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQUERY ET CSS()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script>
	
	function mafonction(){
	// l'ancienne façon d'écrire avec javascript	
	//document.getElementById("div1").style.backgroundColor = "#4682B4"; 
	$("#div1").css("background","#4682B4")
						
	}
	
	
	function annule_mafonction(){
	// l'ancienne façon d'écrire avec javascript	
	//document.getElementById("div1").style.backgroundColor = "#8C3B3D";
	$("#div1").css("background","#8C3B3D")

	}

</script>
</head>

<body>
<div id="div1" mouseover="mafonction()" onMouseOut="annule_mafonction()"></div>
</body>
</html>

05 - jquery + plusieurs css

example : 05- jquery + plusieurs css.html

On peut additionner les css dans la fonction css()

Vous remarquerez qu'il est possible d'ajouter les transition et animation css3, cela anime la transformation, mais nous verrons plus tard comment vraiment gérer l'animation avec Jquery

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script>
	
	function mafonction(){
	//document.getElementById("div1").style.backgroundColor = "#4682B4"; 
		$("#div1").css({
			"background":"#4682B4",
			"border-radius":"20px",
			"transform": 'translateY(200px) translateX(100px) rotateZ(120deg)',
			"transition":"border-radius  1s, background 1s, transform 1s"
		})
	}
	
	
	function annule_mafonction(){
	//document.getElementById("div1").style.backgroundColor = "#8C3B3D";
		$("#div1").css({
			"background":"#8C3B3D",
			"border-radius":"0px"
		})

	}

</script>
</head>

<body>
<div id="div1" onMouseOver="mafonction()" onMouseOut="annule_mafonction()"></div>
</body>
</html>

06 - css() et transition

example : 07- jquery-hover.html

On peut créer des transitions en Jquery avec l'attribut css transition

NOus verrons juste aprés animate() qui permet de faire la mêm chose mais cette fois ci dédié Jquery. De plus nous lançons les fonction depuis Jquery avec

$("#div1").mouseenter

$("#div1").mouseleave

Celles ci ne peuvent être executées qu'on lancemant de

$(document).ready(function(){})

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script> 
$(document).ready(function(){
    $("#div1").mouseenter(function(){
		mafunction();

    });
	$("#div1").mouseleave(function(){
		annule_mafunction();

    });
	
	
});

function mafunction(){
	$("#div1").css(  {"background":"#4682B4",
					  "border-radius":"20px",
					  "transition": "all 2s"
					 }  )
						
	}
	
	
	function annule_mafunction(){
	$("#div1").css({"background":"#8C3B3D",
					"border-radius":"0px"})

	}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

07 - animate()

example : 08- jquery-animated .html

$('...').animate(options, [duration], [easing], [complete])
Cette méthode contient : options : animation à déclencher. Possibilité d’y mettre aussi les options qui suivent et le dalay avant le déclenchement de l’animation (delay)
duration : durée de l’animation (ms)
easing : timing de l’animation (rapide au début et lente à la fin, …)
complete : fonction de callback qui se déclenche un fois l’animation terminée

Ici, nous faisons un déplacement vers 100px/100px, la div monte

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script> 
function anime(){

$( "#div1" ).animate({
	left:"100px",
	top:"100px"
  }, 1000, function() {}
  );	
}
</script>
</head>

<body>
<div id="div1" onMouseOver="anime()"></div>
</body>
</html>

08 - animate() et quand la transition est finie

example : 09- jquery-animated hover.html

On lance lorsque la transition est finie une autre fonction. On pourrait mettre un autre animate pour cummuler les déplacements

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script> 

function anim(){
	$( "#div1" ).animate({
		opacity: "0.25",
		left:"500px",
	  }, 500, function() {
	$( "#div1" ).html( "<div id='contenu'><p> ok on continue</p></div>" );
	
  })
}

function retour(){

$( "#div1" ).animate({
		opacity: 1
	  }, 500
	  )	
}
</script>
</head>

<body>
<div id="div1" onMouseOver="anim()" onMouseOut="retour()"></div>
</body>
</html>

09 - plusieurs animate() imbriqués

example : 12-jquery animate deplacement progessif.html

Aprés avoir lancé le 1er animate() losque la fonction se termine un 2eme animate() est lancé. Remarquez aussi qu'il n'ya pas left=30px MAIS left += 30px . Cela signifie, a partir de la position ou tu es tu ajoutes 30 px. Le carré ne revient jamais au point de départ.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="jquery.min.js"></script>

<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script> 

function anim(){
	$( "#div1" ).animate({
		left: "+=30px",
	  }, 500, function() {
	$( "#div1" ).animate({top:"-=30px"}, 500,function() {} )
	})
}
</script>
</head>

<body>
<div id="div1" onMouseOver="anim()"></div>
</body>
</html>

10 - un carré que la souris chasse

example : 14 - jquery-animated- aleatoire .html

Math.random() tire au hasard une décimale entre 0 et 1. En *500 nous avons donc un tabeau de chiffres compris entre [0,500]

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#div1 {
	position: absolute;
	height: 100px;
	width: 100px;
	top: 200px;
	left: 200px;
	background-color: #8C3B3D;
}
</style>
<script> 
function anime(){

$( "#div1" ).animate({
	left:(Math.random() * 500),
	top:(Math.random() * 500)
  }, 1000, function() {}
  );	
}
</script>
</head>

<body>
<div id="div1" onMouseOver="anime()"></div>
</body>
</html>