Hilfe in JavaScript

    Hallo zu alle. Ich heiße Robert und bin ein Mediengestalter die nicht so viele Kenntnisse in JavaScript habe. Meine Problem ist folgendes ich habe 7 verschiedene DIVs und wenn man mit dem Maus auf eine drüber fährt die anderen müssen verschwinden und die auf welche der Maus ist muss sich vergrößern und in der Mitte von allem kommen und alles das mit Verzögerung damit es besser aussieht. Ich wollte noch gezielt sagen in DIVs befindet sich ein SVG Datei. Und dass muss als schöne Animation sein. Ich zeig euch was für Befehl ich benutzt habe:

    $(document).ready(function(){

    $("#hexagon--20").mouseover(function(){

    document.getElementById("hexagon--15").style.opacity = "0";

    document.getElementById("hexagon--16").style.opacity = "0";

    document.getElementById("hexagon--21").style.opacity = "0";

    document.getElementById("hexagon--22").style.opacity = "0";

    document.getElementById("hexagon--26").style.opacity = "0";

    document.getElementById("hexagon--27").style.opacity = "0";

    document.getElementById("hexagon--15").style.transitionProperty = "opacity";

    document.getElementById("hexagon--15").style.transitionDuration = "2s";

    document.getElementById("hexagon--15").style.transitionDelay = "0s";

    document.getElementById("hexagon--16").style.transitionProperty = "opacity";

    document.getElementById("hexagon--16").style.transitionDuration = "2s";

    document.getElementById("hexagon--16").style.transitionDelay = "0s";

    document.getElementById("hexagon--21").style.transitionProperty = "opacity";

    document.getElementById("hexagon--21").style.transitionDuration = "2s";

    document.getElementById("hexagon--21").style.transitionDelay = "0s";

    document.getElementById("hexagon--22").style.transitionProperty = "opacity";

    document.getElementById("hexagon--22").style.transitionDuration = "2s";

    document.getElementById("hexagon--22").style.transitionDelay = "0s";

    document.getElementById("hexagon--20").style.transitionProperty = "transform";

    document.getElementById("hexagon--20").style.transitionDuration = "2s";

    document.getElementById("hexagon--20").style.transitionDelay = "0s";

    document.getElementById("hexagon--26").style.transitionProperty = "opacity";

    document.getElementById("hexagon--26").style.transitionDuration = "2s";

    document.getElementById("hexagon--26").style.transitionDelay = "0s";

    document.getElementById("hexagon--27").style.transitionProperty = "opacity";

    document.getElementById("hexagon--27").style.transitionDuration = "2s";

    document.getElementById("hexagon--27").style.transitionDelay = "0s";

    document.getElementById("hexagon--20").style.transitionProperty = "transform";

    document.getElementById("hexagon--20").style.transitionDuration = "1s";

    document.getElementById("hexagon--20").style.transitionDelay = "0s";



    });

    $("#hexagon--20").mouseout(function(){

    document.getElementById("hexagon--15").style.opacity = "1";

    document.getElementById("hexagon--16").style.opacity = "1";

    document.getElementById("hexagon--21").style.opacity = "1";

    document.getElementById("hexagon--22").style.opacity = "1";

    document.getElementById("hexagon--26").style.opacity = "1";

    document.getElementById("hexagon--27").style.opacity = "1";

    document.getElementById("hexagon--15").style.transitionProperty = "opacity";

    document.getElementById("hexagon--15").style.transitionDuration = "2s";

    document.getElementById("hexagon--15").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--15").style.transitionDelay = "2s";

    document.getElementById("hexagon--16").style.transitionProperty = "opacity";

    document.getElementById("hexagon--16").style.transitionDuration = "2s";

    document.getElementById("hexagon--16").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--16").style.transitionDelay = "2s";

    document.getElementById("hexagon--21").style.transitionProperty = "opacity";

    document.getElementById("hexagon--21").style.transitionDuration = "2s";

    document.getElementById("hexagon--21").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--21").style.transitionDelay = "2s";

    document.getElementById("hexagon--22").style.transitionProperty = "opacity";

    document.getElementById("hexagon--22").style.transitionDuration = "2s";

    document.getElementById("hexagon--22").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--22").style.transitionDelay = "2s";

    document.getElementById("hexagon--26").style.transitionProperty = "opacity";

    document.getElementById("hexagon--26").style.transitionDuration = "2s";

    document.getElementById("hexagon--26").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--26").style.transitionDelay = "2s";

    document.getElementById("hexagon--27").style.transitionProperty = "opacity";

    document.getElementById("hexagon--27").style.transitionDuration = "2s";

    document.getElementById("hexagon--27").style.WebkitTransitionDelay = "2s";

    document.getElementById("hexagon--27").style.transitionDelay = "2s";



    });



    });

    Das wäre für ein einziges DIVs und alle anderen haben den Gleichen Befehl.

    JA genau. Also die Animation ist die richtige aber nicht wenn man auf dem Hexagon klickt sondern wenn man mit dem Mauszeiger drauf ist. Die Funktion hover in Css oder in JavaScript glaube ich heißt mouseover, und wenn die eine sich vergrößert die anderen müssen verschwinden ich habe versucht mit opacity. Ich versuche dir auch ein Video hochzuladen.

    Das geht auch das die anderen verschwinden, so wie du es haben willst.

    * Link entfernt , weil existiert nicht mehr *

    Nur ich verstehe noch nicht warum die nicht wieder kommen, wenn ich mit der Maus weggehe. Weil laut Inspektor bekommt die den neuen Wert ja.

    Sempervivum kannst du mal bitte kurz rein gucken ,warum die Hexagons ,die den opacity von 0 bekommen ,nach den hovern nicht wieder kommen (opatity:1;). Ich finde den Fehler irgendwie nicht.

    Die bleiben verschwunden, weil die Klasse .opa noch gesetzt ist, so dass der Endwert der Animation wirksam ist.


    Hover hat drei Nachteile:

    1. Funktioniert nicht auf Touch-Geräten
    2. Führt zum (langsamen) Flackern, wenn sich das Hexagon weg bewegt und nicht mehr unter der Maus liegt.
    3. Es ist praktisch unmöglich, das mittlere zu vergrößern, weil man zuvor mit der Maus über eines der äußeren fährt und dieses dann das mittlere überdeckt.

    Ja das habe ich auch gemerkt,man müsste mit der Maus hinterher fahren damit das hovern vernünftig läuft.Ich würde auch die erste Variante mit click() nehmen.

    Aber das muß der TE ja wissen.

    Es geht ja eigentlich erstmal darum das die ausgeblendeten wieder eingeblendet werden.

    Ich versuche mich gerade dran und hatte auchgedacht ,das man das ausblenden anders machen könnte,also kürzere Code.

    zb so.

    Code
    g=this.id;
 $('div').css('opacity','0').find('#'+g).css('opacity','1');

    Leider blendet er dann alle aus.Obwohl ,wennich das hintere allene mache

    Code
    $('div').find('#'+g).css('opacity','1');

    Den dann findet.Mache ich aber beides,egal welche reinfolge ,blendet er alles aus .


    Zitat von Sempervivum
    1. Es ist praktisch unmöglich, das mittlere zu vergrößern, weil man zuvor mit der Maus über eines der äußeren fährt und dieses dann das mittlere überdeckt.

    Normaler weisse stimmt das ja.Aber mit der kleinen Verzögerung die da drinne ist geht es so halbwegs.



    EDIT: Versuche gerade nach den hovern die Classe OPA zu removen aber die verschwindet einfach nicht ,die bleibt bestehen.Auch wenn ich es nur an einen hexagon versuche. Was übersehe ich da ?

    Ok habs gefunden.

    Meistens ist man auch zu blöde.


    Candea47

    Hier ist nochmal nach deinen Wünschen geändert

    * Link entfernt , weil existiert nicht mehr *


    Aber denk dran was Sempervivum schrieb ( #post6) . Man kann auf Touch Geräten nicht hovern und wenn man mit der Maus zu langsam ist, wird alles gehovert bis zur Mitte, wenn man den mittleren hovern will.

    In mein Beispiel gehts noch, weil da eine Verzögerung drinnen ist. Ohne Verzögerung sieht es doof aus.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden