Question

我有这段代码可以正常工作！但是我想做的是在JAVASCRIPT中添加另一个类，让它说为非活动状态，这样，当我关闭X时，可以添加另一个动画。但是创建该动画时遇到了问题。我可以使用toggleClass这样做还是应该使用什么？谁能帮我吗？

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

Answer 1

切换后，您只需检查.icon是否没有.active类，然后即可添加所需的任何功能。

$(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");
    }

    });
});

这是您的示例，其中添加了代码和CSS：http://jsfiddle.net/9yrvwou0/

Answer 2

您可以使用jQuery有效地做到这一点，例如，您想通过类图标元素将div的“ active”类添加到div中：

Map<String, List<Item>>

希望有帮助：）

Answer 3

尝试使用jquery动画：

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

您还可以调整动画时间

Answer 4

使用以下脚本将起作用：

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

关闭时更改动画“汉堡包”图标

4 个答案: