CSS3 transition & transform is not working well on class removal

CSS3 transition & transform is not working well on class removal - javascript

I've made some nice hamburger effect which is pretty common these days over the websites in mobile navigation bar.
So when someone click the hamburger it turn the X perfectly (when adding a "open" class) but when the class removed the animation is changing weirdly, please watch the effect at the following code:
HTML:
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
CSS:
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-moz-transform: rotate3d(0, 0, 1, 0deg);
-o-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#hamburger span:nth-child(3) {
top: 14px;
-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
-o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
-webkit-transition-delay: 0s, 0.3s;
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
}
Javascript:
$(document).ready(function () {
$('#hamburger').click(function () {
$(this).toggleClass('open');
});
});
https://jsfiddle.net/phhkL4bu/4/
Can you please help me out?

You can correct the removal animation by doing the following:
Set the forward transition's setting within the .open selector. When the .open class is added, the opacity of second child is transitioned for a duration of 0.3s without any delay. At the same time, the top position of the other 2 children is also being transitioned. Then after a 0.3s delay, the transform of the 1st and 3rd children is transitioned. This gives the effect of the top and the bottom bar moving down and then rotating.
Set its exact reverse as transition setting in the default selector. That is,make the transform on the 1st and 3rd child transition immediately with a 0.3s duration while the top of these two children and the opacity of the 2nd child are transitioned after a delay of 0.3s. This setting will apply when the element loses the .open class and so,will produce the reverse effect.
$(document).ready(function() {
$('#hamburger').click(function() {
$(this).toggleClass('open');
});
});
#hamburger {
float: left;
width: 20px;
height: 25px;
position: relative;
}
#hamburger span {
width: 100%;
height: 3px;
border-radius: 5px;
background: #000000;
position: absolute;
display: block;
transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
top: 0;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger span:nth-child(2) {
top: 7px;
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
}
#hamburger span:nth-child(3) {
top: 14px;
transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger.open span:nth-child(1) {
top: 7px;
transform: rotate3d(0, 0, 1, 45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(2) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#hamburger.open span:nth-child(3) {
top: 7px;
transform: rotate3d(0, 0, 1, -45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

Related

Change the animations oh hamburger icon when closed

I have this code which works just fine! But what I am trying to do is to add another class in JAVASCRIPT lets say non-active so in this way I can add another animations when i close the X. But I'm having problems creating that. Can i do this with toggleClass or what should I use? Can anyone help me?
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>

You just have to check if the .icon has not the class .active once you toggle, then you can add any functionality you want.
$(document).ready(function() {
$(".icon").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if(!$(this).hasClass("active")){
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".icon .hamburger").addClass("non-active");
}else{
$(".icon .hamburger").removeClass("non-active");
}
});
});
Here is your example with the added code and css: http://jsfiddle.net/9yrvwou0/

You can use jQuery to do this effectively, say you wanted to add the 'active'class to the div with class icon element:
$(".icon").addClass("active");
Hope that helps :)

Try using jquery animate:
$(".icon").click(function() {
$(".icon").animate(function(){
$(".icon").toggleClass("active");
},500)
});
You can also adjust the animation time

Use below script this will work:
<script>
$(document).ready(function() {
$(".icon").click(function(){
$(".icon").toggleClass("blue");
});
});
</script>
$(document).ready(function() {
$(".icon").click(function(){
$(".icon").toggleClass("blue");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>

responsive side navigation menu with hamburger icon

simple menu header when not opened
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
right: 0;
background-color: #EF8354;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
.nav-right.visible-xs {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right.visible-xs .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
.button.active .middle {
width: 0;
}
.move-to-left {
-webkit-transform: translateX(-400px);
-moz-transform: translateX(-400px);
-ms-transform: translateX(-400px);
-o-transform: translateX(-400px);
transform: translateX(-400px);
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
.visible-xs {
display: none;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
hello the above code is for side navigation bar.it works fine for me but the problem i am facing is when i click on the hamburger icon it pull or slide my main section to the left side.i don't want to slide my background content or main content to be slide left side & my close button is to be display on right side of menu body section.but it display outside or aside of the menu bar.as well i want to make my menu shrink or resize on page scroll.menu design

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<span class="glyphicon glyphicon-remove pull-right" id="close-button" style="color: white;font-size: 30px;"></span>
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
<style>
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right: 0;
background-color: #EF8354;
display:none;
z-index: 3;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
#btn-close {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#btn-close .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item {
opacity: 3;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
#btn-close{
display: none;
}
}
</style>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$(this).hide();
$(".sidebar").css('display','block');
});
$("#close-button").on("click", function() {
$('#btn').show();
$(".sidebar").css('display','none');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
}
});
});
</script>
This is what you asked for? I have added close glyphicon instead of button.Hope this resolves your issue.

change specific element while having the same class to multiple elements

I have an image gallery. I want to change 'margin-top' to 50px for every '.item' element that has less than 140px of height(for responsive design purpose). this is what i have so far.
what should I write in between the curly brackets in order for this to work?
please reffer to the javascript code.
var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
.item {
cursor: pointer;
max-height: 150px;
min-height:120px;
position: relative;
overflow: hidden;
top:0;
left:0;
}
.item img {
position: absolute;
right:0;
padding:0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.item {
position: absolute;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.item:hover { opacity: 1; }
.item .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
text-align:center;
}
.item {
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.item:hover,
.item:focus {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}
.item:hover .tagline,
.item:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
<div class="item " data-w="160" data-h="100"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
<div class="tagline overtext"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;">etet
</div>
</div>
</div>

mozilla css transform property dosn't work

I am building an overlay with simple transform mocking slide-down effect. I works fine in Chrome and Safari, but it doesn't work in Firefox and i don't know why.
Here is my css:
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($off-canvas-bg, 0.95);
z-index: 99;
overflow: auto;
}
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
and html:
<div class="overlay overlay-slidedown">
</div>
I am adding open class with javascript:
toggleMenu: function ( ) {
var overlay = this.$('.overlay');
if( overlay && overlay.hasClass('open') ) {
overlay.removeClass('open')
}
else if(overlay){
overlay.addClass('open')
}
},

Try adding this to .overlay
transform-style: preserve-3d;
Quite often when FF transforms are not right, this is missing from the appropriate element. Webkit builds seem not to require this to establish the required stacking contexts, but Chrome/Safari suffer funny effects with the z-index on adjacent sibling elements in such cases.

How to animate border drawing with jQuery?

I want to draw a border around my links on hover, with animation smth like this http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
Please give me some snippets or links.
Thank you
This is how i tried to animate it with jquery
$('a').on('hover', function() {
$(this).animate({ border: '1px' }, 'slow', 'linear');
$(this).animate({ border: 'solid' }, 'slow');
$(this).animate({ border: '#ccc' }, 'slow');
});

If you Have no Idea To like this:)
$("#block").mouseenter(function(){
$("#span1,#span2,#span3,#span4").show();
$("#span1").animate({
height: "50px"
}, 1500 );
$("#span2").animate({
width: "110px"
}, 1500 );
$("#span3").animate({
height: "55px",
top:"-5px"
}, 1500 );
$("#span4").animate({
width: "105px",
left:"-5px"
}, 1500 );
});
$("#block").mouseleave(function(){
$("#span1").animate({
height: "5px"
}, 1500 );
$("#span2").animate({
width: "5px"
}, 1500 );
$("#span3").animate({
height: "5px",
top:"50px"
}, 1500 );
$("#span4").animate({
width: "5px",
left:"100px"
}, 1500,function(){
$("#span1,#span2,#span3,#span4").hide();
});
});
See fiddle:Click me

OK, So i checked out the site, seems they are using a custom animation handler.
Here, this is the external js file that handles all the custom animation.
Custom Handler
Now what you have to do is create multiple divs for each line. Then customize it the way you want. If you want to have the exact same look-
For the horizontal divs,
position:absolute;
border-bottom: 1px;
width: 0px;
height: 0px;
border-bottom-color:#000;
border-bottom-style:solid;
For the vertical divs, just change border-bottom to border-left.
Now the jquery,I'll try to explain how the custom handler works, if you directly wan to copy paste,
Here you go .
First you define the div you want to animate, $fx('#theHeader1') then you add the parameters for making the animation work .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}), here-
type: Can be with,height,left,top that you want to change
from: Value to start from
to: Value up to
step: Describes speed (should be negative if going from greater value to smaller value)
delay: I guess its for smoothness.Without delay it appears buggy.
Just to say: Making that kind of animation will require a lot of time.

you can check this pen.the technique used is css transitions, no jquery involved
what you do need is like tannerjohn said, a div for each side of button
http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110
html:
<div class="main">
<div class="button">
enter
<div class="line-top"> </div>
<div class="line-right"> </div>
<div class="line-bottom"> </div>
<div class="line-left"> </div>
</div>
</div>
css:
.button{
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin: 70px 0 0 -60px;
border: 1px solid rgba(255,255,255,0.25);
}
.button .line-top{
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-right{
position: absolute;
bottom: 0;
right: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-bottom{
position: absolute;
bottom: -1px;
right: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-left{
position: absolute;
top: 0;
left: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-top{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-right{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-bottom{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-left{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Develop Reference

JavaScript is the programming language of the Web.

CSS3 transition & transform is not working well on class removal - javascript

Related

Change the animations oh hamburger icon when closed

responsive side navigation menu with hamburger icon

change specific element while having the same class to multiple elements

mozilla css transform property dosn't work

How to animate border drawing with jQuery?

Categories

Resources