jquery - 无法通过 jquery 获取要切换/添加的类

Question

对于这个冗长的问题，请考虑我的歉意。

问题:无法通过 jquery 切换/添加类。

场景:我在 html 中使用 svg 的路径元素绘制了一个随机形状。使用 css 我可以获得形状的行进 Ant 效果。我已经使用下面的 css 代码来做到这一点。

.content {
  stroke-dasharray: 10 5;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 15s linear infinite;
} 

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

这会产生一种朝一个方向行进的 Ant 效果。如果你想要另一个方向，你必须在@-webkit-keyframes 中反转 from 和 to。

我想做什么？我想根据光标的位置改变行进的 Ant 的方向。

我现在做了什么？我为每个方向的“行进”效果定义了单独的动画规则。这是:

.content1 {
  stroke-dasharray: 10 5;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 15s linear infinite;
}

.content2 {
  stroke-dasharray: 10 5;
  stroke-dashoffset: 1000;
  -webkit-animation: dash_reverse 15s linear infinite;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}


@-webkit-keyframes dash_reverse {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

我试图通过 Javascript 确定光标的位置并更改元素的类。这是 Javascript 代码:

$(document).ready(function(){
  $(document).mousemove(function(event){
    var content = $("#content");
    var left  = content.offset().left;
    var pageX = event.pageX;

    if (pageX<left) {
        $("#content").addClass("content1");
        $("#content").removeClass("content2");
        }
    else {
        $("#content").addClass("content2");
        $("#content").removeClass("content1");
        }
  });
});

但是当我执行 javascript 代码时，我没有得到动画效果。我尝试使用 toggleClass() 方法但没有结果。

Here是 JSfiddle 链接。

Answer 1

我认为在 html 中找不到类属性。

if (pageX<left) {
    $("#content").attr("class","content1");
    }
else {
    $("#content").attr("class","content2");
    }