Hallo,
ich möchte auf meiner Seite eine kleine Spielerei zum einlenden eines Divs mittels jquery haben. Das ganze hab ich folgender Masen in mein Setup eingebunden:
page.headerData.5 = TEXT
page.headerData.5.value (
<script type="text/javascript">
$(function() {
$("#rahmen" ).css("opacity","0.0" );
$("#rahmen" ).hover(function () {
$(this).stop().animate({
opacity: 1.0
}, "slow" );
},
function () {
$(this).stop().animate({
opacity: 1.0
}, "slow" );
});
});
</script>
)
Die Jquery-Bibliothek hab ich über includeJS eingebunden, allerdings funktioniert das ganze einfach nicht.
Als HTML-Seite funktioniert das ganze ohne Probleme, nur wenn ichs dann in Typo3 haben möchte, tut sich nix.
Weiß jemand, warum das so ist, bzw wo mein Fehler liegen könnte?
PS: hab zwischen " und ) ein leerzeichen eingefügt, weil sonst das ") rauskommt
w52 schrieb
Weiß jemand, warum das so ist, bzw wo mein Fehler liegen könnte?
Sicherlich wird noch mindestens eine andere JS-Biblithek eingebunden,
da kann es dann Problem geben.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
nope, die seite ist recht klein und hat sonst keinerlei java drauf, sprich jquery ist die einzige biliothek...
Hallo,
$(this).stop().animate({..});
Das stop() ist da richtig? Für mich würde es bedeuten: "Stoppe das was gerade passiert". Also die Animation würde nicht anspringen.
Aber du sagst ja, dass es ohne Typo3 funktioniert.
Zwei Ideen:
jQuery wird nach dem Script eingebunden -> Mal im Quelltext schauen. Ohne jQuery kein $, was zum Fehler führt.
Wenn du den Firefox hast, dann mache mal "Extras -> Fehlerkonsole" auf - das hilft ungemein weiter. Oder noch besser: Installiere das "Firebug"-Plugin für den Firefox. Das hat noch mehr Ausgaben - u. a. das HTML zur Laufzeit.
EDITH:
Noch eine Idee: Gibt es bei jQuery nicht auch ein $(document).ready() ? Vllt. geht da nix, weil es #rahmen noch nicht gibt?
Beispiel:
$(document).ready(function () {
$(#rahmen).myOpacity();
})
(function($) {
$.fn.myOpacity = function(options) {
var defaults = {
opacityOff: 0,
opacityOn: 1,
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var obj.hover({
function () {
$(this).animate({opacity: options.opacityOn}, "slow" );
},
function () {
$(this).animate({opacity: options.opacityOff}, "slow" );
}
});
});
return this;
};
})(jQuery);