Ciao a tutti,
mi scuso se non inserisco il link ad una pagina internet ma trascrivo l'intero codice qui sotto.
Ho costruito questa animazione studiando un po' da autodidatta quale sono... Vorrei che cliccando sul div grigio si potesse tornare alla situazione di partenza, ovvero ai quattro riquadri iniziali. In pratica, vorrei inserire il comando "toggle" con l'animate. Qualcuno sa se è possibile farlo e come è possibile intervenire sul codice?
Grazie,
saluti a tutti,
HC
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").animate({
opacity: '0.5',
height: '500px',
width: '1200px',
});
$(".div2").animate({
opacity: '0.5',
height: '150px',
width: '400px',
top: '500px',
left: '0px'
});
$(".div3").animate({
opacity: '0.5',
height: '150px',
width: '400px',
top: '500px',
left: '400px'
});
$(".div4").animate({
opacity: '0.5',
height: '150px',
width: '400px',
top: '500px',
left: '800px'
});
});
});
</script>
<style>
body {margin:0;border:none;padding:none}
.div1, .div2, .div3, .div4
{
width: 600px;
height: 300px;
-webkit-transition: width 1s ease, height 1s ease;
-moz-transition: width 1s ease, height 1s ease;
-o-transition: width 1s ease, height 1s ease;
transition: width 1s ease, height 1s ease;
}
.div1 {
background-color:grey;
position:absolute;
}
.div2 {
background-color:red;
position:absolute;
left:600px;
}
.div3 {
background-color:yellow;
position:absolute;
top:300px;
}
.div4 {
background-color:green;
position:absolute;
top:300px;
left:600px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
Rispondi quotando
