无法通过jquery切换/添加类

时间:2014-08-25 12:56:11

标签: jquery html css addclass toggleclass

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

问题:无法通过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。

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

我现在做了什么? 我为每个方向定义了单独的动画规则"行进"影响。这是:

.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链接。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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