nicht angemeldet
jQuery -> Bildtausch, Flickereffekt
Matthias ApselMoin
ich hab ne Bewertungsfunktion in ne Seite eingebaut, die so recht nicht funktionieren will.
HTML
<div id="rate" style="margin-top:20px;margin-left:25px;float:left;color:#000;font-size:1.4em">
Rate it.
<a href="" id="star20" class="stars"><img src="/images/stargrey.png" /></a>
<a href="" id="star40" class="stars"><img src="/images/stargrey.png" /></a>
<a href="" id="star60" class="stars"><img src="/images/stargrey.png" /></a>
<a href="" id="star80" class="stars"><img src="/images/stargrey.png" /></a>
<a href="" id="star100" class="stars"><img src="/images/stargrey.png" /></a>
</div>
jQuery
$(document).ready(function()
{
//###################################
// Funktion zum Abbilden des Rating #
//###################################
function showrating()
{
//JSON-Objekt per Ajax holen
$.getJSON("/widgets/rating.php?vid=dfOM9VexYsU",function(ergebnis)
{
var rating=ergebnis.anzahl*25;
// Alle a-Elemente durchegehen
$("#rate a").each(function()
{
// Wenn RAting bestimmten Wert angenommen hat, vollen, halben oder grauen Stern zeichnen
if (rating>=($(this).index()*20+15))
$("#rate a:eq("+$(this).index()+") img").attr("src","/images/starfull.png");
else if (rating>=($(this).index()*20+5))
$("#rate a:eq("+$(this).index()+") img").attr("src","/images/starhalf.png");
else
$("#rate a:eq("+$(this).index()+") img").attr("src","/images/stargrey.png");
});
});
}
// Funktion zum Abbilden des Ratings beim initialisieren aufrufen
showrating();
//#########################################################################################
// Funktion zum Tausch der Sterne die vor dem gewählten Stern stehen gegen grünen stern #
//#########################################################################################
$('#star20,#star40,#star60,#star80,#star100').mouseover(function()
{
// alle sterne mit niedrigerem index als der gewählte tauschen
$("#rate a img:lt("+$(this).index()+"),#rate a img:eq("+$(this).index()+")").attr("src","/images/staryellow.png");
});
//#######################################
// Funktion zum Zurücktausch der Sterne #
//#######################################
$('#star20,#star40,#star60,#star80,#star100').mouseout(function()
{
// alle sterne zurücktauschen
showrating();
});
})
Beim drüberfahren werden aber teilweise nur kurz die gelben sterne eingeblendet um sofort danach wieder zurückgewechselt zu werden, obwohl ich mit der Maus den Link nicht verlassen habe. Eine Idee woran das liegen kann?
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
Moin
mit der Hover-Funktion von jQuery funktionierts. Wäre trotzdem schön hinter das Problem hinter dem Problem zu kommen... ;)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
mit der Hover-Funktion von jQuery funktionierts. Wäre trotzdem schön hinter das Problem hinter dem Problem zu kommen... ;)
Wenn du das src-Attribut änderst ist das Bild möglicherweise kurz weg, dadurch wird das mouseout-Event angestoßen und es kommt wieder das andere Bild rein, welches aber schon im Speicher liegt und somit gleich da ist und auch keinen neuen Mouseover auslöst (Mutmaßung).
Besser ist es in so einem Fall einfach ein Sprite zu verwenden und ein Hintergrundbild zu verschieben -
Deine Sterne kannst du dann mit einer Liste abbilden.
Es gibt übrigens schon ein recht gutes jQuery-Plugin für Sterchenbewertung:
http://www.fyneworks.com/jquery/star-rating/-
Moin
mit der Hover-Funktion von jQuery funktionierts. Wäre trotzdem schön hinter das Problem hinter dem Problem zu kommen... ;)
Wenn du das src-Attribut änderst ist das Bild möglicherweise kurz weg, dadurch wird das mouseout-Event angestoßen und es kommt wieder das andere Bild rein, welches aber schon im Speicher liegt und somit gleich da ist und auch keinen neuen Mouseover auslöst (Mutmaßung).
Besser ist es in so einem Fall einfach ein Sprite zu verwenden und ein Hintergrundbild zu verschieben -
Deine Sterne kannst du dann mit einer Liste abbilden.
Es gibt übrigens schon ein recht gutes jQuery-Plugin für Sterchenbewertung:
http://www.fyneworks.com/jquery/star-rating/DAs mag sein. Ich möchts aber allein hinbekommen. Ich dachte mir schon das es ein Laufzeitproblem sein wird. KAnn man ni irgendwas a la "erst alle vorherigen Aktionen beendenlassen" einpflegen? Hab da so richtig nix gefunden. Ansonsten läufts ja gut. ;)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
Moin
Om nah hoo pez nyeetz, Bobby!
Matthias
Es MUSS jQuery sein, da der Inhalt dynamisch per Ajax mit jQuery geladen wird. ;)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
Hallo,
//#########################################################################################
// Funktion zum Tausch der Sterne die vor dem gewählten Stern stehen gegen grünen stern #
//#########################################################################################
$('#star20,#star40,#star60,#star80,#star100').mouseover(function()
{
// alle sterne mit niedrigerem index als der gewählte tauschen
$("#rate a img:lt("+$(this).index()+"),#rate a img:eq("+$(this).index()+")").attr("src","/images/staryellow.png");
});
//#######################################
// Funktion zum Zurücktausch der Sterne #
//#######################################
$('#star20,#star40,#star60,#star80,#star100').mouseout(function()
{
// alle sterne zurücktauschen
showrating();
});
})
[/code]zwei Fragen:
was macht das '+' am Anfang und Ende jedes :lt und :eq Selektors?
hast du mal Probiert ob der Fehler auch auftritt, wenn du die mouseout Funktion auskommentierst?Viele Grüße,
Tim-
was macht das '+' am Anfang und Ende jedes :lt und :eq Selektors?
Das ist der JavaScript-Verkettungsoperator, der ist da durchaus sinnvoll, weil la der Selektor mit dem Rückgabewert gefüttert wrden soll.
-
was macht das '+' am Anfang und Ende jedes :lt und :eq Selektors?
Das ist der JavaScript-Verkettungsoperator, der ist da durchaus sinnvoll, weil la der Selektor mit dem Rückgabewert gefüttert wrden soll.
sorry ich hatte gerade falsch geguckt. macht natürlich Sinn ;)
-
-
-
Moin
So, ich hab nun endlich den "Fehler" gefunden. Ich hab bei jedem zurücksetzen einen Ajaxrequest durchgeführt. Das dauert natürlich bis eine Antwort da ist. Und eben diese Abfragezeit hat das verspätete Ausführen des Zurücksetzens bewirkt. Nun wird nur noch ein Ajax-Request zum Anfang und bei Klick ausgeführt... und es läuft hervoragend flüssig. Danke für alle Hinweise ;)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
