nicht angemeldet
Problem mit jQuery Animation
Hallo,
ich habe ein Problem mit dem unteren Code und zwar wenn ich auf die Header (Header1, Header2, Header3) unten klicke, dann wird der Text der Header ein- und ausgefahren. Das klappt so weit ganz gut, aber:
Wenn ich nach einingen malen Text ein- und ausfahren den Browser- Scrollbalken mit der Maus wieder nach oben fahren will, dann "erzittert" der ganze Bildschirm.
Ich kann mir das ehrlich gesagt nicht erklären und ich weiß auch nicht, was ich da machen kann.
Vielleicht könnte sich das jemand ansehen. mir wäre da sehr geholfen.
Vielen Dank,
lg
Umlauf
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<title>JSP Page</title>
</head>
<body>
<h1>jQuery Floating Text Test</h1>
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
Text <br />
<div id="latestNews">
<div id="latestNewsHeader">Letzte Neuigkeiten</div> <br />
<div class="latestNewsShortcut"><b>Header1</b></div>
<p class="latestNewsText" style="display: none">
Das ist der Text der unter Header 1 <br />
ein- und ausgefahren werden kann wenn man auf <br />
die Überschrift Header1 klickt <br />
Das ist die viere Zeile
</p>
<div class="latestNewsShortcut"><b>Header2</b></div>
<p class="latestNewsText" style="display: none">
Das ist der zweite Text, der ausgefahren werden soll, wenn man <br />
oben auf den Header klickt, wenn man dann ein zweites mal auf <br />
den Header klickt, dann wird dieser Text wieder eingefahren. <br />
Das ist die viere Zeile
</p>
<div class="latestNewsShortcut"><b>Header3</b></div>
<p class="latestNewsText" style="display: none">
Das ist der dritte Text, der ausgefahren werden soll, wenn man <br />
oben auf den Header klickt, wenn man dann ein zweites mal auf <br />
den Header klickt, dann wird dieser Text wieder eingefahren. <br />
Das ist die viere Zeile
</p>
<div id="anker"></div>
<br />
</div>
<script>
$(function() {
$('.latestNewsShortcut').hover(
function() {
$(this).toggleClass('hovered');
}).click(
function() {
$(".latestNewsText").hide("slow");
var newsText = $(this).next(".latestNewsText");
$('.latestNewsShortcut').removeClass('clickStyle');
$(this).toggleClass('clickStyle');
if(newsText.is(":visible")) {
newsText.hide("slow");
$(this).removeClass('clickStyle');
}
else {
newsText.show("slow");
}
})
});
$(function() {
$('.latestNewsShortcut').bind("click", function(event) {
event.preventDefault();
var newsText = $(this).next(".latestNewsText");
var ziel = $('#anker');
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 3000 , function () {location.hash = ziel;});
});
return false;
});
</script>
</body>
</html>
-
Hi,
Ich kann mir das ehrlich gesagt nicht erklären und ich weiß auch nicht, was ich da machen kann.
Erst mal ein Online-Beispiel liefern, damit wir das direkt und live nachvollziehen können.
Und dann mal beschreiben, in welcher Umgebung du das Phänomen beobachtest (bestimmter Browser, oder „alle“).
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ich verwende den Browser Firefox mit der Version 3.6.12.
Ich weiß jetzt nicht, wo ich das Beispiel online stellen kann. Vielleicht könnte es jemand auch so ausprobieren.lg
-