Einfach Div Deckkraft Verblassen im Fokus mit mootools

Habe ich ein paar divs in einer Seite, die halten einfach HTML & Bilder. Die divs jeweils eindeutige ids haben.

Möchte ich es so, dass wenn die Seite geladen wird der Inhalt des div werden sagen, 60%, sondern auf mouseover einblenden bei 100%. Auf mouseout würden Sie gehen zurück auf 60%.

Die Website aufgebaut ist, in Joomla 1.5.x so schon lädt die mootools 1.11 Bibliothek. Ich war auf der Suche nach Beispiel-code im Netz und fand viele Referenzen für verblassen die Deckkraft von Bildern mit jQuery-aber nicht alle, dass viel für mootools.

Alle Hinweise wären sehr willkommen 🙂

InformationsquelleAutor | 2009-02-09
  1. 0

    Können Sie möglicherweise wickeln Sie das Bild in ein div und verwenden Sie so etwas wie dies zu verblassen?

    Fx.Style("div1", "opacity").start(1.0);
    • Ich habe dies auf meiner test-Seite. Wie würde ich mich über was Sie ändern bei mouseover? Ich habe gesagt, dass ich habe keine Erfahrung mit mootools
    InformationsquelleAutor Frost
  2. 0

    Haben eine Lösung gefunden, auch eine Art.
    Es funktioniert in mootools 1.2.1. Ich habe optimiert den code zu verblassen divs und nicht img.

    Ich habe dies in meinem Kopf:

    <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);">

    und dann diese auf meine 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>

    Problem ist jetzt ich bin mir nicht sicher, wie man die gleiche Wirkung in 1.11

    • warum gehst du nicht einfach aktualisieren, oder verwenden Sie beide? ..hat die fade-Funktion nicht vorhanden in der 1.11?
    • Kann nicht aktualisieren wie andere Joomla Komponenten kann 'break'. Ich habe gelesen, dass die V1.6 soll sich auf mootools 1.2, aber für den moment der Kompatibilitätsmodus sein soll ist fraglich. Werde es mal ausprobieren.
    InformationsquelleAutor
  3. 0

    Verwenden Sie eine CSS3 transition für diese statt. Es ist viel einfacher. Siehe (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);
}
    InformationsquelleAutor Erin
Schreibe einen Kommentar