hover und .gif

Script · 3. September 2010, 02:55

Hey ich dachte mal :

"machen wir doch einen Button mit .gif hover (animierter hover)".

Okay klappt soweit.

Aber wenn ich mit dem Mauszeiger länger drauf bleibe , dann wiederholt es sich immer... (es soll sich von oben nach unten füllen...)

Es sollte eig nur einmal füllen und dass immer wenn ich mit dem zeiger drauf gehe...

ulle · 3. September 2010, 09:51

also mein Tipp lass die finger von gif und nutze für sowas jQuery ist wesentlich einfacher und funktioniert besser :D

Also Beispiel kannste dir das mal anschauen:
queness.com/resources/html/fadein/index.html

Und das dazugehörige Tutorial:
queness.com/resources/html/fadein/index.html

internetfreak · 3. September 2010, 13:58

[FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Dein Problem dürfte evtl daran liegen, dass der Browser die .gif abspielt, aber nimmer aufhört auch wenn der Hover zu ende ist.
Machs so wie ulle sagte, hover is bei .gif glaub eh weniger geeignet wenn das halt so ein bewegtes bild is.[/SIZE][/COLOR][/FONT]

ulle · 3. September 2010, 15:36

Und falls du fragen dazu hast dann schreib einfach hier :D

Script · 3. September 2010, 19:23

Vielen Dank Ulle !

den CSS und HTML Code kapiere ich.

aber Java kapiere ich nicht... vllt könntest du mir ein paar von den wichtigen funktionen erklären ? :)

Quellcode

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="hover"><\/div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>

Alles anzeigen

Lg

ulle · 4. September 2010, 12:25

viel erklärung gibt es da nicht. jQuery ist so aufgebaut das es sich anhand der funktionen selbsterklärt. Ein wenig Grund Englisch vorrausgesetzt. Ansonsten kannst du mit ein wenig Englisch auch auf jQuery: The Write Less, Do More, JavaScript Library alles rausfinden. Wenn du irgendwelche Fragen bei der Verwenundg hast dann meld dich einfach hier.

Ansonsten wünsche ich dir viel Erfolg und immer dran denken Learning by Doing es ist noch kein Meister vom Himmel gefallen.

Gruß
Ulle

felix · 5. September 2010, 19:45

Nur mal so am rande, wenn du gifs erstellst kannst du auswählen ob es sich einmal
wiederholen soll oder permanent von vorne anfängt wenn die animation abgespielt ist

ulle · 5. September 2010, 22:35

Nur mal so am rande, wenn du gifs erstellst kannst du auswählen ob es sich einmal
wiederholen soll oder permanent von vorne anfängt wenn die animation abgespielt ist

Mal wieder ein total sinnloses Posting :D

stell dir mal vor er macht es so. Und du lädst die seite nicht erneut. Was passiert wenn du das 2te mal über den Button gehst?

Und wie gesagt macht es euch doch net so umständlich. Dafür gibt es doch die Programmiersprachen, das man diese auch benutzt oder etwa nicht?

felix · 6. September 2010, 00:19

ulle;189473 schrieb:

Mal wieder ein total sinnloses Posting :D

stell dir mal vor er macht es so. Und du lädst die seite nicht erneut. Was passiert wenn du das 2te mal über den Button gehst?

Und wie gesagt macht es euch doch net so umständlich. Dafür gibt es doch die Programmiersprachen, das man diese auch benutzt oder etwa nicht?

Ehm nein, sobald man mit der Maus runtergeht und wieder draufgeht sollte die
Animation erneut abgespielt werden. Man kann jeden Scheiß programmieren, aber
warum umständlich wenns auch einfach geht? Nebenbei fällt mir gerade nicht ein
das ich mich zu dem Thema geäusert habe was den nun die bessere Variante ist.
Animierte Gifs werden nebenbei häufig verwendet.

Mal wieder sinnlose Klugscheißerei, tu mir nen gefallen und leg deine Haufen
unter nen Post von jemanden der nicht MINDESTENS auf deinem Niveau
ist. Ich rede hier nicht von Knowledge.

Quellcode

Teilen