Jquery 我的伪元素动画不起作用_Jquery_Html_Css

Jquery 我的伪元素动画不起作用

jquery html css

Jquery 我的伪元素动画不起作用,jquery,html,css,Jquery,Html,Css,**您好，我的菜单信息不起作用，无法找出原因。它应该是这样工作的：当你点击菜单图标时，图标从汉堡变成了十字架我的HTML是这样的：** <body> <div class="menu"> <div class="line"></div> </div> <script>$('.menu').click(function(){ $this = $(this);

**您好，我的菜单信息不起作用，无法找出原因。它应该是这样工作的：当你点击菜单图标时，图标从汉堡变成了十字架

我的HTML是这样的：**

    <body>
     <div class="menu">
      <div class="line"></div>
    </div>
    <script>$('.menu').click(function(){
      $this = $(this);
      if ($this.hasClass('active')) {
        $this.removeClass('active');
      }
      else {
        $this.addClass('active');    
      }

    });</script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

您可以在加载JQuery之前使用它。因此，更改加载顺序，事情应该会正常进行。

因为您的

行

类是绝对定位的，您的

菜单

没有任何维度，因此无法单击。如果给出

.menu

尺寸，则可以单击该尺寸

看这把小提琴：

阐明对动画伪元素的支持。历史上，webkit浏览器在设置伪元素动画时存在问题，这是固定的。然而，似乎在大约一年前（2014年初），这一修复方案被逆转。这个问题在blink浏览器中似乎也很明显。因此，对于x浏览器的支持，应该真正避免伪元素动画

即使有支持，本例中的伪元素也可能位于文档流之外，因此，不会总是响应单击事件。

我在src代码之后添加了是否加载了页面，但页面仍然不工作？关于应用程序应该做什么，请确定。你能详细解释一下“不起作用”是什么意思吗？JSFIDLE的问题是-405度的变换不起作用，导致当点击时它变成了一条线，就像一个十字架一样？@Clarke-bizard。它工作得很好。我只检查了firefox。刚用webkit浏览器检查过，它会照你说的做。有空的时候我会看一看的。谢谢@dewd，这是我笔记本电脑的故障，因为它在我的电脑上工作得很好desktop@Clarke像您这样使用伪元素有一个固有的问题。1）它们的动画似乎并不适用于所有浏览器：2）由于单击事件不能绑定到它们，并且由于它们的位置可以位于父元素之外，因此您会发现单击并不总是触发父单击事件。

.menu {
  position: absolute; 
  height: 40px;
  width: 40px;
  cursor: pointer;
  top: 3%;
  left: 95%;
  z-index: 999;
}
.line {
  height: 5px;
  width: 40px;
  background: red;
  position: absolute;
  top: 50%;
  transition: all 250ms linear;

}
.line:after, .line:before {
  content: ' ';
  height: 5px;
  width: 40px;
  background: red;
  position: absolute;
  transition: all 250ms linear;
}
.line:before {
  top: -10px;
}
.line:after {
  bottom: -10px;
}
.menu.active .line {
    background: transparent;
}
.menu.active .line:before {
    background: red;
    transform: rotate(-405deg);
    top: 0px;
}
.menu.active .line:after {
     background: red; 
    transform: rotate(405deg);
    bottom: 0px;
}