Question

我有一个带有SVG的HTML5页面，其中包含

    <path id="outlineCO" class="state included" [details omitted]/>

我有以下CSS：

    .state {
        fill: #ffff66;
        fill-opacity: 0.7;
        stroke: #000000;
        stroke-width: 1;
        stroke-opacity: 1;
    }
    .state.included {
        fill: cyan;
        fill-opacity: 1; 
        transition: fill 2s ease-in;
    }
    .state.included.new {
        fill: magenta;
        transition: none;
    }

要点是我的美国地图上的州有默认背景;包含＆＃34;包含的状态＆＃34;有另一个背景;并指出暂时还给出了班级名称＆＃34; new＆＃34;得到另一个背景。

使用jQuery，如果我在Chrome控制台中执行以下操作，

$("#outlineCO").toggleClass("new");

我看到科罗拉多州的背景颜色从青色变为品红色，正如预期的那样。如果我再次执行相同的代码，我会看到科罗拉多州在2秒的时间内从品红色过渡回青色。

但是，如果我执行

$("#outlineCO").toggleClass("new"); $("#outlineCO").toggleClass("new");

或

$("#outlineCO").toggleClass("new").toggleClass("new");

没有任何反应。颜色一直保持蓝色。好像添加＆＃34; new＆＃34;我删除它时，元素还没有注册。在添加将注册之前是否需要经过一定的时间，以便删除将具有将状态立即切换为洋红色然后慢慢回到青色的所需效果？

Answer 1

如果您希望坚持使用jQuery，可以使用jQuery UI库中的toggleClass方法（参见 docs ），该方法也接受持续时间参数（ms ）。

请参阅下面的代码段（持续时间设置为1000毫秒）：

$('#square').toggleClass('new', 1000).toggleClass('new', 1000);

#square {
  width: 50px;
  height: 50px;
  background: #ccc;
}

#square.new {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<div id="square"></div>

切换CSS类太快而无法注册？

1 个答案: