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 :)

  • 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 betretten der Seite wird die animation einmal ausgeführt.


    Ich zeige dir mal wie ich das mit der transition meine

    https://codepen.io/basti1012/pen/eYYZxeY


    Wenn das reicht ist ja gut.

    Ansonsten kannn 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
    1. ele=document.querySelectorAll('.deineclasse');
    2. ele.forEach((i)=>{
    3. i.classList.remove("hoveranimationon");
    4. i.classList.toggle("hoveranimationoff");
    5. });

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


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

    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 mußt 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://codepen.io/basti1012/pen/wvvzYxy?editors=1010



    Mit Jquery müßte das reichen bei mein Script

    Code
    1. $('.helfer').on('mouseover',function(){
    2. $('.test').addClass('go').removeClass('back');
    3. }).on('mouseleave',function(){
    4. $('.test').addClass('back').removeClass('go');
    5. })
  • 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 ...

  • 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