[JavaScript] Scriptaculous appear/fade

Dieses Thema im Forum "Webentwicklung" wurde erstellt von hacker5, 21. Januar 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 21. Januar 2010
    Scriptaculous appear/fade

    Hey, also kleines nerviges Problem mit Scriptaculous wie ich finde. Mal ein kleiner abgespeckter Auszug aus meinem Script:

    Code:
    var li=$$('li').each(function(element){

 element.onmouseover= function() {
 this.appear({from:0.5, to: 1});
 }
 
 element.onmouseout= function() {
 this.fade({1, to: 0.5});
 }
}
    Also beim mouseover soll das Element erscheinen und beim mouseout verschwinden.
    Problem hierbei ist, dass das ganze gerne mal hängen bleibt wenn man schnell drüber und direkt wieder raus fährt mit der Maus. Ich hab mich schon tot gegooglet um rauszufinden wie man das handhaben soll.

    Am besten wäre, wenn man sagen könnte stoppe den Effekt oder lass ihn zuende machen fage dann erst mit dem neuen an. Die funktion element.stop() funktioniert hierbei nicht.


    Habe dann die API durchgelesen und habe den Befehl queue gefunden mit den Optionen front und end. Jedoch bringt das nichts, da es nicht in einer Funktion aufgerufen wird sondern in zwei Verschiedenen (mouseover/out).

    Hat jemand das Problem schonmal gehabt und gelöst?
     
  3. 21. Januar 2010
    AW: Scriptaculous Effekte appear/fade

    Code:
    document.observe("dom:loaded", function() {
 var li = $$('li').each(function(element) {
 var busy = false, over, out;
 element.setOpacity(.5);
 element.observe('mouseover', (over = function(event) {
 if(busy) {
 //erst wenn effect fertig
 window.setTimeout(function() { over(event); }, 1000);
 return;
 }
 
 busy = true;
 Effect.Appear(this, { 
 from: .5,
 to: 1,
 afterFinish: function() { busy = false; } 
 });
 }.bind(element))).observe('mouseout', (out = function(event) {
 if(busy) {
 //erst wenn effect fertig
 window.setTimeout(function() { out(event); }, 1000);
 return;
 }
 
 busy = true;
 Effect.Fade(this, {
 from: 1,
 to: .5,
 afterFinish: function() { busy = false; }
 });
 }.bind(element)));
 });
});
    funktioniert. du solltest aber ein wenig an der duration drehen, sonst fangen die elemente an zu blinken wenn man damit a weng spielt ^^

    //mit dem SAU::Queue objekt wäre es auch realisierbar gewesen.
     
  4. 22. Januar 2010
    AW: Scriptaculous appear/fade

    Okay sorry für den ungewollten push. Hatte noch ein Problem, welches ich dann doch gelöst bekommen habe.


    Ahh Murdoc danke Ich werd mir das mal anschaun und zur Not bekommen halt die damit rumspielen ein Blinkeffekt


    Wie genau würdest du das denn mit dem queue realisieren? Ich hab das gestern probiert halt dem mousover queue: front und dem mouseout queue: end zugewiesen, hat den aber nicht wirklich interessiert.

    -------------

    Edit:// Okay als kleiner Tip für andere, das besagte Blinken hört auf wenn man das ganze auf das Bild anwendet anstatt auf die Liste.

    Das komische ist, wenn man das ganze auf die Liste anwendet, löst der onmouseout Handler aus auch wenn man die Maus nicht bewegt. Beim Img-Tag wird das ganze tatsächlich erst ausgelöst wenn die Maus aus dem Bild fährt.


    Aufbau ist so:
    Code:
    <ul>
 <li>
 <a href=""><img src=""></a>
 </li>
</ul>
     
  5. 22. Januar 2010
    AW: Scriptaculous appear/fade

    joa, das is öfter so. li -> a triggert beim li den mouseout event.

    nur mit css funktioniert das richtig.
     
  6. 23. Januar 2010
    AW: Scriptaculous appear/fade

    Ahh okay das ist gut zu wissen. Das wusste ich noch nicht, dank dir!


    Da wäre nur noch die Frage, was hat der IE gegen deine SetTimeout Lösung.

    Code:
    var busy=true;

$('test').observe('click', (test = function(event) {
 Event.stop(event); // href return false
 
 alert('test'); 
 if(busy){
 alert('busy');
 window.setTimeout(function() {test(event)},500) 
 busy=false;
 }
 }));
    Der erste alert wird ausgegeben, der zweite auch. Normalerweise müsste nach 500ms ja dann wieder ein Alert mit 'test' erscheinen. Beim FF und Opera geht das auch, nur beim IE wird das Timeout zwar gestartet, aber die funktion wird nicht erneut aufgerufen. Hast du ne Idee?

    Mir fällt da spontan nichts zu ein, das Problem hatte ich bisher noch nicht
     
  7. 23. Januar 2010
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: Scriptaculous appear/fade

    vielleicht spinnt der IE wegen dem fehlenden ";" nach test(), das müsste dann aber eher ein syntax-error sein (was ich mir ned vorstellen kann).

    kommt denn ne fehlermeldung?

    ah stop, habs. der ie is . [...]
    siehe: [JavaScript] Scriptaculous appear/fade - RR:Board
     
  8. 23. Januar 2010
    AW: Scriptaculous appear/fade

    Hey danke schonmal, da wäre ich nie im Leben drauf gekommen.
    Hast du das ganze ausprobiert an einen anderen Kontex zu binden?

    Ich hab es jetzt mal mit window anstatt element probiert.

    Problem hierbei ist, dass es beim mir den IE trotzdem nicht interessiert.
    Und das andere Problem ist, dass wenn ich es an window binde, die anderen Sachen in der Funktion nicht mehr richtig ausgeführt werden und mein Firefox sich soweit aufhängt, dass nur noch neustarten was bringt.


    Die andere Methode mit dem bind an der Funktion vom setTimeout hat leider nicht funktioniert.
     
  9. 23. Januar 2010
    AW: Scriptaculous appear/fade

    du darfst den "event" nicht übergeben, so wars ^^

    also aus test(event) wird test()
    und Event.stop(event) muss auch raus. am besten so:
    if(event) Event.stop(event);

    ich hatte das problem auch schonmal und kam wegen stundenlangem debuggen grad a weng durcheinander ^^

    IE halt...
     
  10. 23. Januar 2010
    AW: Scriptaculous appear/fade

    Murdoc du bist der beste. Vielen vielen dank, du hast mir die nacht gerettet. Das heißt mal vor 5 schlafen gehen Da muss man erstmal drauf kommen.


    Der IE soll sich mal an die Standarts von Opera und Firefox halten.
    Dann wäre das debuggen gar nicht mehr so schlimm.
     
  11. 23. Januar 2010
    AW: Scriptaculous appear/fade

    passt perfekt hier rein: IE is Being Mean to Me - YouTube

     
  12. 23. Januar 2010
    AW: Scriptaculous appear/fade

    Das ist ja mal herrlich kannte ich noch nicht, da musste wohl jemand mal seinen ganzen Frust mit einem Lied freien lauf lassen
    Okay bevor das in Offtopic endet und ich ärger bekomm, schließ ich hier mal und sag nochmal danke und lass dich nicht vom IE ärgern^^
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.