Ciao a tutti,
non riesco a capire come mai il seguente codice non funziona.
Dovrei far si che il div in questione, si accorci.
Codice PHP:var container = $("#slider_container");
var fx = new Fx.Elements(container, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
fx.start({ height: [300, 100] });
Suggerimenti?
Grazie!
se usi Fx.Elements presupponi che piu' elementi siano coinvolti nell' animazione
(mentre hai un selettore per id, quindi rigorosamente parli di un unico elemento)
l' oggetto contenuto in start e set con Elements deve specificare, via indice, per ogni elemento selezionato proprieta' e valori da animare
se vuoi animare solo l' altezza di un unico elemento puoi usare il tween,codice:fx.start({ '0': { 'height': [300, 100] }, '1': { 'height': [100, 300] // questa e' l' animazione del secondo elemento selezionato in container } });
se piu' proprieta' vanno animate contemporaneamente, sempre per un solo elemento, morph
ciao
Questa è un'informazione molto utile, grazie
Ho provato a modificare, ma non funziona ancora. C'è qualcosa che sbaglio, ma non capisco.
Codice PHP:var container = $("#slider_container");
var fx = new Fx.Tween(container, {wait: false, duration: 500, transition: Fx.Transitions.Bounce.easeOut});
fx.start('height',300, 100);
quello che hai scritto e' corretto e funziona
Ti faccio vedere l'HTML e tutto il js perché l'animazione non và :/
Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript" src="slider-menu.js"></script>
</head>
<body>
<div id="slider_container">
<ul id="slider">
<li id="kwick_red" class="chapter"><span>Red</span>
<li id="kwick_orange" class="chapter"><span>Orange</span>
<li id="kwick_yellow" class="chapter"><span>Yellow</span>
<li id="kwick_green" class="chapter"><span>Green</span>
<li id="kwick_blue" class="chapter"><span>Blue</span>
<!-- <li id="kwick_indigo" class="chapter"><span>Indigo</span>
<li id="kwick_violet" class="chapter"><span>Violet</span> -->
[/list]
</div>
</body>
</html>
Codice PHP:window.addEvent('domready', function(){
var szNormal = 117, szSmall = 100, szFull = 219;
var kwicks = $$("#slider .chapter");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i){
kwick.setStyle('opacity',0.8);
});
kwicks.each(function(kwick, i) {
kwick.addEvent("click", function(event){
var container = $("#slider_container");
var fx = new Fx.Tween(container, {wait: false, duration: 500, transition: Fx.Transitions.Bounce.easeOut});
fx.start('height',300, 100);
});
kwick.addEvent("mouseenter", function(event) {
var o = {};
o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
kwick.setStyle('opacity',1);
kwicks.each(function(other, j) {
if(i != j) {
var w = other.getStyle("width").toInt();
if(w != szSmall) o[j] = {width: [w, szSmall]};
}
});
fx.start(o);
});
kwick.addEvent("mouseleave", function(event) {
var o = {};
kwicks.each(function(kwick, i) {
o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
kwick.setStyle('opacity',0.8);
});
fx.start(o);
});
});
});
perche' stai usando mootools 1.11
quella che ti ho suggerito io e' la sintassi da usare con la 1.2.x
sinceramente non ho tempo di andare a ricacciare la sintassi per la vecchia versione
per cui ti suggerisco di fare un upgrade di mootools stesso (che e' comunque il caso)
scarichi tutto il core della 1.2.4 da http://mootools.net/download
dal more builder http://mootools.net/more puoi selezionare solo "Fx.Elements" e scarichi
includi nel documento il core prima e il more dopo e lo script cambia veramente di poco
ciaocodice:window.addEvent('domready', function(){ var szNormal = 117, szSmall = 100, szFull = 219; var kwicks = $$("#slider .chapter"); var container = $("slider_container"); var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut}); var fxContainer = new Fx.Tween(container, {wait: false, duration: 500, transition: Fx.Transitions.Bounce.easeOut}); kwicks.each(function(kwick, i){ kwick.setStyle('opacity',0.8); }); kwicks.each(function(kwick, i) { kwick.addEvent("click", function(event){ fxContainer.start('height',300, 100); }); kwick.addEvent("mouseenter", function(event) { var o = {}; o[i] = {width: [kwick.getStyle("width").toInt(), szFull]} kwick.setStyle('opacity',1); kwicks.each(function(other, j) { if(i != j) { var w = other.getStyle("width").toInt(); if(w != szSmall) o[j] = {width: [w, szSmall]}; } }); fx.start(o); }); kwick.addEvent("mouseleave", function(event) { var o = {}; kwicks.each(function(kwick, i) { o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]} kwick.setStyle('opacity',0.8); }); fx.start(o); }); }); });
Rieccomi!
Che dire: tutto funziona alla perfezione ora!
Inoltre mi hai dato un grosso aiuto e ho capito alcune delle differenze tra la 1.11 e la 1.2.4
Grazie!
Permessi di invio
Rispondi quotando