manipulowanie elementem css z jquery

Question

Nadal uczę się jquery.

Chcę, aby kod, jeśli kliknę na przycisk 2 DIV ruszy jednocześnie, a tło będzie nakładka przez innego div z opacity 0,5

więc po kliknięciu na menu przycisk, menu z prawej i lewej stronie menu w lewo iw prawo odpowiednio

następnie z-index i opacity z div class="overlay" zostaną zmienione, a następnie sprawdzić, czy #circleMenu ma .open klasę, jeśli nie to dodaj .open klasa i przenieść #left i #right div

używam zwyczaj określoną funkcję, aby go uruchomić onclick="show()"

kod nie działa, kiedy sprawdzić problemu i błędu na konsoli mówi:

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

EDYTOWANIE

dzięki @Tirthraj Barot, błąd zniknął.

nadal moje pytanie pozostaje, spodziewam się, że kod, aby to zrobić, po kliknięciu na przycisk:

1. zmienić krycie nakładki tła i z-index tak będzie nakładanie ciało

2. przesuń 2 divs wewnątrz kręgu jednocześnie

Spodziewałem się, że zostanie wykonane w tym samym czasie, ale w rzeczywistości tak nie jest. Pierwszy raz kliknięciu na przycisku, tylko tło jest nakładka, po raz drugi, nakładka tło znika ale DIV przesuwa

 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 powinny być w cudzysłowach

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

zaktualizowałem powyższy kod. Zapomniałeś napisać px po 100 i -100 w, jeśli i jeszcze blokuje.

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

Wystarczy pokazać jednoczesny ruch obu div, w left i right I aby zmienić kolor tła nakładki zgodnie z moimi spostrzeżeniami, trochę zaktualizowałem twój kod. Daj mi znać, jeśli źle zinterpretowałem Twoje wymagania.

Spójrz na to.

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

Zmiana przycisku:

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

Następnie w użyciu jQuery:

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

Ustawia na kliknięcie programu obsługi dla elementu przycisku. Zobacz: http://api.jquery.com/on/