Beiträge von Candea47

Ich danke dir sehr viel für deine Hilfe.

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.

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.