2009-04-08 6 views
0

Ok, donc j'ai un site qui exécute Joomla et qui utilise le framework mootools 1.11. J'ai fouillé ensemble une version de travail en utilisant des exemples du framework mootools 1.2 mais je ne peux pas faire coexister les deux avec la couche de compatibilité, sans casser les autres modules du site Joomla.Onload définit l'opacité de divs à 50%

Question J'ai quelques divs avec une classe de « .box_panel » et je l'ai pour qu'ils le mouseover ils vont d'une opacité de 50% et de retour à 100% d'opacité sur mouseleave. Le problème que j'ai est quel est le code pour les mettre à 50% de charge?

En Mootools 1.2 J'utilisé:

<body onload="$$('div.box_panel').fade(0.5);"> 

Le code que je utilise pour le mouseover/effets MouseLeave est:

window.addEvent('domready',function() { 
    //first, apply a class to each of your menu element 
    //$$('.links') puts every element wearing the .links class into an array 
    //$$('.links').each is to browse the array an apply a function to... each of them 
    $$('.box_panel').each(function(el, i) { 
     //there comes exactly your former fx statement except for 
     var ExampleFx = new Fx.Style(el, 'opacity', { //the fact i apply the effect on el 
      wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function... 
      opacity: 0.5, 
      duration: 500, 
      transition: Fx.Transitions.Quart.easeInOut 
     }); 
     //and there i apply (always on el) the effect on mouseenter (similar in this case but often better than mouseover) 
     //and mouseleave (same for mouseenter but concerning mouesout) 
     el.addEvent('mouseleave', function() { ExampleFx.start(1, 0.5); }); 
     el.addEvent('mouseenter', function() { ExampleFx.start(0.5, 1); }); 

    }); 
}); 

Répondre

2

Pouvez-vous pas seulement ajouter ExampleFx.start(1, 0.5); avant que les derniers supports (après la déclaration $$('.box_panel')...)?

+0

Merci pour ce que je vais faire un essai. –

+0

J'ai essayé après la déclaration comme ci-dessous sans succès. $$ ('box_panel') chacune (fonction (el, i) { ExampleFx.start (1, 0,5); En y repensant je pourrais simplement utiliser Propriétés CSS pour définir l'opacité de début du .box_panel. –

0

simple:

 
$$('.box_panel').effect('opacity', 0.5); 
// run this right after your window.addEvent('domready', function() { 

Modifier: J'étais un peu mal ici. Mladen Mihajlovic a répondu complètement correct. En outre, voici quelques liens pour vous: