Question

请考虑我对这个冗长的问题表示歉意。

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

情境： 我在html中使用svg的path元素绘制了一个随机形状。使用css我可以获得形状的行进蚂蚁效果。我使用下面的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;
  }
}

这给了一个方向的行军蚂蚁效果。如果你想要在另一个方向，你必须在@ -webkit-keyframes中反转from和to。

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

我现在做了什么？ 我为每个方向定义了单独的动画规则＆＃34;行进＆＃34;影响。这是：

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

Answer 2

问题是 jQuery不支持SVG元素类，这就是为什么你必须使用 .attr（）方法而不是.addClass（）。removeClass（）。

旧票证中的好解释和示例：jQuery SVG, why can't I addClass?

无法通过jquery切换/添加类

2 个答案: