Simplement Div Opacité Fade sur Focus en utilisant mootools

J'ai un couple de divs dans une page qui contiennent des images HTML simples &. Les divs ont chacun des identifiants uniques.Simplement Div Opacité Fade sur Focus en utilisant mootools

Je voudrais que quand la page charge le contenu de la div disons, 60% mais sur mouseover le fondu à 100%. Au départ, ils reviendraient à 60%.

Le site est construit dans Joomla 1.5.x donc déjà charge le Mootools 1.11 bibliothèque. Je cherchais un exemple de code sur le net et j'ai trouvé beaucoup de références pour atténuer l'opacité des images avec jQuery mais pas autant pour mootools.

Tous les pointeurs serait apprécié :)

Source

2009-02-09 Anonymous

Vous pourriez être en mesure d'envelopper l'image dans un div et utiliser quelque chose comme ça à disparaître?

Fx.Style("div1", "opacity").start(1.0);

Source

2009-02-09 12:15:26 Frost

J'ai ajouté ceci à ma page de test. Comment pourrais-je les faire changer au passage de la souris? J'aurais dû dire que je n'avais aucune expérience avec mootools –

Je n'ai pas experince avec mooTools, mais il peut être fait en utilisant javascript: Je l'ai vu inhere: http://forum.mootools.net/viewtopic.php?id= 5125, et pour obtenir l'effet mouseover, il suffit de l'appeler onmouseover et onmouseout – Frost

Trouvé une solution, bien en quelque sorte. Cela fonctionne dans mootools 1.2.1. J'ai modifié le code pour faire disparaître les divs et ne pas img.

Je mets cela dans ma tête:

<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script> 
<script type="text/javascript"> 

    var fade_in = 1; 
    var fade_out = 0.5; 

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

et cela sur mes divs.

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);"> 
     <h2>Box One</h2> 
     <p>This is a content box and some sample content to pad it out.</p> 
</div>

Le problème est maintenant, je ne suis pas sûr de savoir comment obtenir ce même effet 1.11

Source

2009-02-09 15:54:46

pourquoi ne pas simplement mettre à jour ou utiliser les deux? ..does la fonction de fondu n'existe pas dans le 1.11? – Frost

Impossible de mettre à niveau car d'autres composants Joomla risquent de «casser». J'ai lu que V1.6 est supposé passer à mootools 1.2 mais pour le moment le mode de compatibilité est censé être incertain. Je vais essayer. –

Utilisez une transition CSS3 pour ce lieu. C'est beaucoup plus simple. Voir (http://www.w3schools.com/css/css3_transitions.asp)

div.box_panel { 
    opacity: 0.6; 
    filter: alpha(opacity=60); 
    -webkit-transition: opacity .5s linear; 
    -moz-transition: opacity .5s linear; 
    -ms-transition: opacity .5s linear; 
    -o-transition: opacity .5s linear; 
    transition: opacity .5s linear; 
} 

div.box_panel:hover { 
    opacity: 1; 
    filter: alpha(opacity=100); 
}

Source

2017-01-13 11:34:19 Erin

Simplement Div Opacité Fade sur Focus en utilisant mootools

Répondre

Questions connexes