CODEWITHSUNDEEP
javascripthtmlcss
cameron
cameron

Reputation: 11

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>

Upvotes: 0

Views: 69

Answers (4)

Ayuthia
Ayuthia

Reputation: 36

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/

Upvotes: 2

Mohit Gupta
Mohit Gupta

Reputation: 739

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>

Upvotes: 0

Jovanne Olalo
Jovanne Olalo

Reputation: 11

Try using jquery animate:

$(".icon").click(function() {
    $(".icon").animate(function(){
        $(".icon").toggleClass("active");
   },500)  
});

You can also adjust the animation time

Upvotes: 0

sjdm
sjdm

Reputation: 589

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

Upvotes: 0

Related Questions