Reputation: 45
The .toggleClass()
method is only adding "class" to my selection, so when clicking all i get is:
<div id="toggle" class>
...
Instead of
<div id="toggle" class="on">
...
I've been trying to figure it out for like 2 hours, reading posts about the same issue, but doesn't seem to be the same case as mine even though the result is.
Javascript's first bit is just animating a loading screen and hiding it
$(function() {
$(".loader_gif_wrapper").fadeOut(1000, function() {
$(".slider").animate({
width: ["0%", "swing"]
}, 2000, function() {
// Animation complete.
$(".loader_page_wrapper").hide();
// FIN ANIMACIONES LOADING
$("#toggle").click(function() {
$(this).toggleClass('on');
//$("nav").toggle();
});
});
});
});
#toggle {
position: absolute;
left: 3rem;
top: 3rem;
z-index: 10000;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
opacity: 1;
visibility: visible;
}
#toggle .span {
height: 3px;
background: #ffffff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
border: solid 1px $tres;
} //#toggle.on{
// border: solid 0px $tres;}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="toggle">
<div class="span" id="one">One</div>
<div class="span" id="two">Two</div>
<div class="span" id="three">Three</div>
</div>
Upvotes: 0
Views: 95
Reputation: 67525
You have to put the event declaration out of the callback so you will be sure that event will be attached in all case if the callback reached or not :
$(function() {
$(".loader_gif_wrapper").fadeOut(1000, function() {
$(".slider").animate({
width: ["0%", "swing"]
}, 2000, function() {
// Animation complete.
$(".loader_page_wrapper").hide();
});
});
$("#toggle").click(function() {
$(this).toggleClass('on');
//$("nav").toggle();
});
});
WORKING SAMPLE
$(function() {
$("#toggle").click(function() {
$(this).toggleClass('on');
});
});
#toggle {
position: absolute;
left: 3rem;
top: 2rem;
z-index: 10000;
width: 40px;
height: 30px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
opacity: 1;
visibility: visible;
background-color: green;
}
#toggle .span {
height: 3px;
background: #ffffff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
border: solid 1px;
border: solid 0px;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
Upvotes: 1