Mootools morph opacity

[storming]

Bonjour à tous,
j'essaie de faire petit script mootools (je débute avec ce framework), qui met l'opacité d'un li du menu joomla à 0 quand la souris le survol et le remet à 1 quand elle sort.

Voilà ce que j'ai fait:

window.addEvent('fademenu', function(){
  $('.item-435').set('opacity', 0.5).addEvents({
    mouseenter: function(){
      this.morph({
        'opacity': 0
      });
    },
    mouseleave: function(){
      this.morph({
        'opacity': 1
      });
    }
  });
});

Donc '.item-435' est la classe css de l'élement du menu.

J'ai fait uniquement un lien vers le js comme ceci:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/fades.js"></script>

Voilà, mais ça ne fonctionne pas.
Ps: si quelqu'un saurait me dire comment ajouter un paramètre sur le temps de fading j'en serais ravis

Merci.

[storming]

Re : Mootools morph opacity

J'ai réussi à faire fonctionner le code comme ceci:

window.addEvent('domready', function(){
	var action = $$('.item-435');
  action.set('opacity', 1).addEvents({
    mouseenter: function(){
      this.morph({
        'opacity': 0
      });
    },
    mouseleave: function(){
      this.morph({
        'opacity': 1
      });
    }
  });
});

Toutefois j'ai un petit soucis: en déplaçant la souris à chaque 1 pixel la souris interpole entre souris habituel et souris lien et il me faut double-cliquer pour aller au lien... étrange

[storming]

Re : Mootools morph opacity

une petite vidéo qui vous permettre peut-être de mieu comprendre:

http://www.youtube.com/watch?v=XWMbpK0EuRA

ps: on ne voit pas très bien mais l'opacité change l’égerment sans même bouger la souris et la souris passe en mode normal et lien toute les demie seconde.
ps2: j'ai changer de jquery à mootools en espérant que le problème sois réglé mais le soucis est le même et je n'arrive pas à le situer

[ghazal]

Re : Mootools morph opacity

Salut,
tu te compliques bien la vie.
Ton code de départ était correct, sauf trois choses :

window.addEvent('domready',function() {
$$('.item-435').setStyle('opacity', 0.5).addEvents({
mouseenter: function(){
this.morph({
'opacity': 0
});
},
mouseleave: function(){
this.morph({
'opacity': 1
});
}
});
});

*fademenu, la convention est sur le domready
*$$ pour une class, mais ca tu l'as vu
* set a du fonctionner dans des versions antérieures, mais setStyle ou setStyles, c'est mieux.

PS : c'est bien une petite vidéo youtube, mais il y a plus simple :js fiddle
Ton exemple :

http://jsfiddle.net/ghazal/pHwTK/

[ghazal]

Re : Mootools morph opacity

Autre chose :
ceci est correct :

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/fades.js"></script>

mais le "domready" de mootools ne va pas retrouver ses petits quand la class CSS .item-435 ne sera pas présente dans le ... DOM.
--> erreur Firebug à tous les coups.

Il faut donc faire un if ..else :
si cette id ou class existe, il se passe ceci, sinon, .. rien
Exemple :

http://jsfiddle.net/ghazal/pHwTK/5/

dans cet exemple, remplace la class du p par la class indiquée dans le script.

donc pas d'erreur Firebug et tu peux tranquillement balancer ton script tel que l'as montré.

[storming]

Re : Mootools morph opacity

Ok merci Ghazal j'avance petit à petit, et merci pour jsfiddle ca risque d'être beaucoup plus pratique avec ça.

Au faite le problème que j'avais avec le Morph qui se restet à chaque mouvement de souris a été reglé une fois mootools mi à jour.