11548 sujets

JavaScript, DOM et API Web HTML5

Mootools, fx.morph sur un evenement 'click'

Bonjour a tous, voici mon problème, je suis sur un concept de 'slide in et out' de DIV, en cliquant sur le lien la div se développe ou se ferme.

Ca fonctionne... pas a 100%.
Les événements se lancent, mais se stoppent aléatoirement en cours de chemin, et il faut recliquer pour continuer l'ouverture et pour la fermeture c'est encore pire, ca s'arrette bien plus...

Je vous montre ça:

http://www.danielbodi.com/demo/slide/slide.html

Voici le code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="mootools.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<div id="hori1">
		<a href="#">ouvrir<img  id="ouvrhori1" src="haut de page.png"></a>
		<a href="#">fermer<img  id="frmhori1" src="haut de page.png"></a>
</div>
</body>
</html>


et le .js:

window.addEvent('domready', function(){

var el3 = $('hori1');
el3.set('morph', {duration: '1000', transition: 'bounce:out'});
var el4 = $('ouvrhori1');
var el5= $('frmhori1');

//event mouse_enter
$('hori1').addEvents({
    mouseenter: function(){
         this.morph({
        'opacity': 1,
        'background-color': '#d2ddec',
      });
    },
    mouseleave: function(){
      // Morphes back to the original style
      this.morph({
        opacity: 1,
        'background-color': '#c7b299',
		});
    }
  });
  
//event click 
  el4.addEvent('click', function(){
  	 el3.morph({
        'background-color': '#d2ddec',
		'height': '500px',
		'margin-top':'-550px',
		'z-index':9
		
      })
	  ;
    });
	
	el5.addEvent('click', function(){
	  el3.morph({
        'background-color': '#c7b299',
		'height': '150px',
		 'margin-top':'0px',
		'z-index':4
      })
	  ;
    });
 


});


Voilà, est ce que j'ai zappé quelque chose?
dqniel a écrit :
Bonjour a tous, voici mon problème, je suis sur un concept de 'slide in et out' de DIV, en cliquant sur le lien la div se développe ou se ferme.

Ca fonctionne... pas a 100%.
Les événements se lancent, mais se stoppent aléatoirement en cours de chemin, et il faut recliquer pour continuer l'ouverture et pour la fermeture c'est encore pire, ca s'arrette bien plus...

Je vous montre ça:

http://www.danielbodi.com/demo/slide/slide.html

Voici le code:
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;mootools.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen&quot;/&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;slide.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;hori1&quot;&gt;
		&lt;a href=&quot;#&quot;&gt;ouvrir&lt;img  id=&quot;ouvrhori1&quot; src=&quot;haut de page.png&quot;&gt;&lt;/a&gt;
		&lt;a href=&quot;#&quot;&gt;fermer&lt;img  id=&quot;frmhori1&quot; src=&quot;haut de page.png&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


et le .js:

window.addEvent('domready', function(){

var el3 = $('hori1');
el3.set('morph', {duration: '1000', transition: 'bounce:out'});
var el4 = $('ouvrhori1');
var el5= $('frmhori1');

//event mouse_enter
$('hori1').addEvents({
    mouseenter: function(){
         this.morph({
        'opacity': 1,
        'background-color': '#d2ddec',
      });
    },
    mouseleave: function(){
      // Morphes back to the original style
      this.morph({
        opacity: 1,
        'background-color': '#c7b299',
		});
    }
  });
  
//event click 
  el4.addEvent('click', function(){
  	 el3.morph({
        'background-color': '#d2ddec',
		'height': '500px',
		'margin-top':'-550px',
		'z-index':9
		
      })
	  ;
    });
	
	el5.addEvent('click', function(){
	  el3.morph({
        'background-color': '#c7b299',
		'height': '150px',
		 'margin-top':'0px',
		'z-index':4
      })
	  ;
    });
 


});



De plus, lorseque je rajoute un innerHTML pour n'avoir que le lien ouvrir ou fermer selon si la div l'est ou pas, le script ne le prend pas en compte:

el5.addEvent('click', function(e){
      // Morphes back to the original style
           e.stop(); 
	  el3.morph({
       
        'background-color': '#c7b299',
		
		 'margin-top':'0px',
		'z-index':4
      }).innerHTML='<a href="#"><img  id="ouvrhori1" src="haut de page.png"></a>';
	  ;
    });

Voilà, est ce que j'ai zappé quelque chose?
Sujet clos
Aller à