Toggle nur jedes zweite mal

  • Hallo, hab ein kleines Problem (mal wieder haha...) zwar habe ich eine Art hovereffekt geschrieben der auch einen effekt abfeuern soll wenn ich wieder mit der maus runter gehe deswegen überhaupt javascript.. aber ich habe das problem dass es nur bei jedem zweiten mal drüber hovern erst funktioniert... warum ist das so und wie kann ich es lösen ? :)


    es sind bilder in kreisform... sie sollen aufblenden dies geschieht mit einer css animation in einer klasse.. und eine gegenteiige klasse die dann ausgelöst werden soll wenn ich mit der maus wieder runter gehe... hier die klassen :


    und hier das Script dazu


    würd mich sehr freuen :)

  • das sollte aber auch ohne js gehen, oder macht das js da noch mehr als das was man da jetzt sehen kann ?

    Ich hab es nicht hinbekommen einen effekt einzuspielen wenn ich den hover wieder verlasse.. ich hab mich informiert und habe nichts gegenteiliges zu hover gefunden

  • Muss es den beides male ein Keyframe sein? Oder reicht es beim Verlassen mit einer Transition?

    Es geht auch beides mit ein Keyframe , doch beim Betreten der Seite wird die Animation einmal ausgeführt.

    Ich zeige dir mal wie ich das mit der Transition meine

    https://basti1012.bplaced.net/…rdner=html-seminar&id=388

    Wenn das reicht, ist ja gut.

    Ansonsten kann man auch dein Javascript fertig machen

  • Ja es müsste jedesmal ein keyframe sein, da es langsam größer werden soll beim mouseover und beim mouseout langsam klein werden soll :O aber dann wirklich nur über das mouse over... vielleicht nimmt man das dann tatsächlich nicht wahr sollte die animation abgespielt werden beim betreten der seite wegen dem preloader


    edit: jetzt habe ich es selbt hinbekommen mit ;


    aber jetzt ne andere frage... es gibt da ungefähr 7 oder 9 Bilder die die gleiche klasse haben... wie mache ich es dass es auf alle klassen wirksam ist ? getelementsbyclassname geht nicht ...also wenn ich nur das getelementsbyid austausche dagegen... brauche ich dafür noch weiteres unterfangen ? :)

  • wenn dann nimmst du jquery $('.classname')

    Wenn man das nicht will muss man eine Schleife nehmen

    Zb

    Code
    ele=document.querySelectorAll('.deineclasse');
      ele.forEach((i)=>{
    i.classList.remove("hoveranimationon");
    i.classList.toggle("hoveranimationoff");
       });

    und wenn du den IE auch unterstützen willst dann so ungefähr


    Code
    ele=document.querySelectorAll('.deineclasse');
    for(x=0;x<ele.length;x++){
    ele[x].classList.remove("hoveranimationon");
    ele[x].classList.toggle("hoveranimationoff");
    }

    so ungefähr. Ist jetzt ungetestet und freihändig hier hingeschrieben

  • Hmm... das mit dem Queryselector bekomme ich irgendwie noch nicht so hin... ich habe jetzt :


    Lustiger weise wirkt es sich nur auf ein einzelnes Element aus :D es soll sich aber bekanntlich auf alle auswirken... alle haben die gleiche klasse..


    basti1012 gibt es von da aus Möglichkeiten ? Das was Du am Mittwoch gepostet hast, hab ich schon wahrgenommen jedoch ises ziemlich komplex :D ich bin doch noch n Anfänger..


    Edit: Ich habe jetzt ein let in der forschleife vor der einzelvariable geschrieben jetzt funktioniert es :O... gibt es dennoch möglichkeiten weiter zu minimieren ??


  • du möchtest also das, wenn du eins hoverst dann alles Klassen sich bewegen?


    Dein code macht es ja jetzt andersrum. Du hoverst eins und das bewegt sich dann.

    Wenn aber eins gehovert wird und sich alle bewegen sollen musst du den Code etwas anders machen.

    Leichter wäre es ja in diesen Fall mit jQuery aber ohne geht es auch.


    Meinst du das so

    https://basti1012.bplaced.net/…rdner=html-seminar&id=387

    Mit jQuery müsste das reichen bei mein Script

    Code
    $('.helfer').on('mouseover',function(){
       $('.test').addClass('go').removeClass('back');
    }).on('mouseleave',function(){
      $('.test').addClass('back').removeClass('go');
    })
  • du möchtest also das wenn du eins hoverst dann alles klassen sich bewegen ?

    Nein :D es sind 10 bilder die die gleiche klasse haben, jedes einzelne soll hovern wenn ich drüber fahre.. so wie ich das geschrieben hab funktioniert es tatsächlich.. anfänglich hab ich es ja per id gemacht und jedem einzelnen der 10 eine funktion für ausschalten und einschalten gegeben... in mein letzten posting steht da der code drinnen der es machbar gemacht hat :)

  • Zitat

    gibt es dennoch möglichkeiten weiter zu minimieren ??

    Ja, eine Möglichkeit gibt es: Du brauchst nur eine Schleife zu verwenden:

  • Ich habe da wohl was falsch verstanden.

    Fuinktioniert den jetzt alles ?

    Auch das mit den minimieren ?

    Was meinst du den mit minimieren ? Das kenne ich von Browserfenster wenn ich ihn nur noch in der taskleiste sehe.

    Aber wahrscheinlich meinst du das was sempervivum schon schrieb weil alles andere ergibt gerade auch kein sinn

  • Ups mein Fehler mit minimieren meinte ich dass ich den code noch kleiner machen kann als er jetzt schon ist (allein wegen der Abschlussprüfung die ich mitte nächsten Jahres schreibe) ich bin von 125 zeilen auf 16 und Sempervivum ist auf 12 gekommen :D ich kann dann in einer for schleife mehrere funktionen schreiben ...

  • Das geht aber noch kürzer. Und mit jQuery geht es noch Mal etwas kürzer sehe Beispiel aus Beitrag 8. Gibt es dafür sonder Punkte ? Kurzer Code ist immer besser aber sollte das in so einer Arbeit nicht besser ein lesbarer Code sein denn man sofort versteht oder besser so kurz wie möglich

  • Ich soll jedenfalls so doppelt und dreifach dinger vermeiden... jquery schau ich mir demnächst an... wenn ich das mit den forschleifen und noch paar kleinigkeiten in js drauf hab, dann geb ich mir jquery ich darf auch jquery in der prüfung verwenden

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!