manipulieren css-element mit jquery

Question

Ich lerne immer noch jquery.

Ich möchte einen Code machen, wenn ich auf die Schaltfläche klicken, 2 divs gleichzeitig bewegen wird und der Hintergrund wird von einem anderen div mit opacity von 0,5

so überlagert werden, wenn ich auf Menü klicken Taste das Menü rechts und links Menü bewegt sich nach links und rechts jeweils

dann z-index und opacity von div class="overlay" wird geändert, dann prüfen, ob #circleMenu.open Klasse hat, wenn nicht, dannhinzufügenKlasse und #left und #right div

ich verwenden, um benutzerdefinierte definierte Funktion ausführen es onclick="show()"

der Code bewegen nicht funktioniert, wenn ich für Problem und Fehler auf der Konsole überprüfen heißt es:

SyntaxError: Unexpected token. Uncaught ReferenceError: show is not defined

BEARBEITEN

Dank @ Tirthraj Barot ist der Fehler jetzt weg.

noch meine Frage bleibt, ich den Code erwarten, dies zu tun, wenn ich auf die Schaltfläche klicken:

1. die Overlay-Hintergrund Opazitätsveränderung und z-Index so wird es den Körper

2. werden überlagert bewegen sie den 2 divs innerhalb des Kreises gleichzeitig

ich erwartet, dass es in der gleichen Zeit ausgeführt werden, aber in Wirklichkeit ist es nicht. das erste Mal, dass ich auf die Schaltfläche geklickt wird, wird nur der Hintergrund, das zweite Mal, das Hintergrund-Overlay, aber die divs bewegt

 function show() { 
 
    $(".overlay").css("z-index", 1); 
 
    $(".overlay").css("opacity", 1); 
 
     if ($("#circleMenu").hasClass("open") == true) { 
 
     $("#circleMenu").removeClass("open"); 
 
     $("#left").css("left", "-100px"); 
 
     $("#right").css("right", "-100px"); 
 
    } else if ($("#circleMenu").hasClass("open") == false) { 
 
     $("#circleMenu").addClass("open"); 
 
     $("#left").css("left", "100px"); 
 
     $("#right").css("right", "100px"); 
 
    } 
 
} 
 
$(".show").on("click", function() { 
 
    show(); 
 
});

body { 
 
\t margin : 0; 
 
\t padding : 0; 
 
\t width : 100%; 
 
\t height : 100%; 
 
} 
 
.overlay { 
 
\t width : 100%; 
 
\t height : 100%; 
 
\t background-color : gray; 
 
\t opacity : 0; 
 
\t z-index : -1; 
 
\t position : absolute; 
 
\t transition : all 1s; 
 
} 
 
.kontainer-menu { 
 
\t width : 50%; 
 
\t height : 30%; 
 
\t margin : auto; 
 
\t position : relative; 
 
\t z-index : 2; 
 
\t top : 40%; 
 
} 
 
#circleMenu { 
 
\t width : 200px; 
 
\t height : 200px; 
 
\t border-radius : 50%; 
 
\t background-color : red; 
 
\t z-index : 3; 
 
\t position : relative; 
 
\t left : 35%; 
 
} 
 
#left { 
 
\t width : auto; 
 
\t position : absolute; 
 
\t background-color : green; 
 
\t top : 90px; 
 
\t left : 100px; 
 
} 
 
#right { 
 
\t width : auto; 
 
\t position : absolute; 
 
\t background-color : teal; 
 
\t top : 90px; 
 
\t right : 100px; 
 
}

<div class="overlay"></div> 
 
<div class="kontainer-menu"> 
 
<button onclick="show()">Menu</button> 
 
\t <div id="circleMenu"> 
 
\t \t <div id="left"> menu Left</div> 
 
\t \t <div id="right"> menu Right</div> 
 
\t </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 1

.overlay sollten in doppelte Anführungszeichen sein gegangen überlagert

function show() { 
    $(".overlay").css("z-index", 1); 
    $(".overlay").css("opacity", 1); 
    if ($("#circleMenu").hasClass("open") == true) { 
     $("#circleMenu").removeClass("open"); 
     $("#left").css("left", "-100px"); 
     $("#right").css("right", "-100px"); 
    } else if ($("#circleMenu").hasClass("open") == false) { 
     $("#circleMenu").addClass("open"); 
     $("#left").css("left", "100px"); 
     $("#right").css("right", "100px"); 
    } 
} 

---------------- ---------- UPDATE

ich den Code oben aktualisiert. Sie haben vergessen, px nach 100 und -100 in if und anderen Blöcken zu schreiben.

------------ UPDATE 2 ------------

einfach die gleichzeitige Bewegung zu zeigen, sowohl den divs, die left und die right , Und um die Hintergrund-Overlay-Farbe nach meinen Vorstellungen zu ändern, habe ich Ihren Code ein wenig aktualisiert. Bitte lassen Sie mich wissen, wenn ich Ihre Anforderungen falsch interpretiert habe.

Werfen Sie einen Blick darauf.

function show() { 
 
    if ($("#circleMenu").hasClass("open") == true) { 
 
    $(".overlay").css("z-index", 1); 
 
    $(".overlay").css("opacity", 1); 
 

 
    $("#circleMenu").removeClass("open"); 
 
    $("#left").css("left", "-100px"); 
 
    $("#right").css("right", "-100px"); 
 
    } else if ($("#circleMenu").hasClass("open") == false) { 
 
    $(".overlay").css("z-index", 0); 
 
    $(".overlay").css("opacity", 0); 
 

 

 
    $("#circleMenu").addClass("open"); 
 
    $("#left").css("left", "100px"); 
 
    $("#right").css("right", "100px"); 
 
    } 
 
} 
 
$(".show").on("click", function() { 
 
    show(); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: gray; 
 
    opacity: 0; 
 
    z-index: -1; 
 
    position: absolute; 
 
    transition: all 1s; 
 
} 
 
.kontainer-menu { 
 
    width: 50%; 
 
    height: 30%; 
 
    margin: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
    top: 40%; 
 
} 
 
#circleMenu { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
    z-index: 3; 
 
    position: relative; 
 
    left: 35%; 
 
} 
 
#left { 
 
    width: auto; 
 
    position: absolute; 
 
    background-color: green; 
 
    top: 90px; 
 
    left: 100px; 
 
    transition: all 1s; 
 
} 
 
#right { 
 
    width: auto; 
 
    position: absolute; 
 
    background-color: teal; 
 
    top: 90px; 
 
    right: 100px; 
 
    transition: all 1s; 
 
}

<div class="overlay"></div> 
 
<div class="kontainer-menu"> 
 
    <button onclick="show()">Menu</button> 
 
    <div id="circleMenu"> 
 
    <div id="left">menu Left</div> 
 
    <div id="right">menu Right</div> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 2

Ihre Schaltfläche Ändern an:

<button class="show">Menu</button> 

Dann in Ihrer Verwendung jQuery:

$(".show").on("click", function() { 
    show(); 
}); 

Setzt einen Handler auf Klick für das Button-Element. Siehe: http://api.jquery.com/on/