动画：使用Jquery之后

Question

我无法为我的:after制作动画片。这是css中的代码：

#slider .mypagination ul::after
{
    content: "";
    width:25%;
    bottom: 0;
    left:0;
    position: absolute;
    border-top:1px solid #7accc8;
    transition:0.3s;
}

这是我的jquery代码

$(".mypagination li").click(function(){
    $("#slider .mypagination ul:after").css({
        "left":"100px"
    },300);
})

点击工作正常。我使用console.log("click")测试它。 任何人都可以帮助我......

Answer 1

你无法访问：之后，因为它不是DOM的一部分。因此，任何JavaScript都无法访问它。

虽然有一个解决方法。将类添加到要为宽度jquery设置动画的元素。

$(".mypagination li").click(function(){
  $("#slider .mypagination ul").addClass("animationClass")
}

然后用css制作动画。

#slider .mypagination ul:after {
  left: 0;
  transition: all 300ms ease;
}

#slider .mypagination ul.animationClass:after {
  left: 100px;
}

我还没有检查这段代码是否有效，但你可以尝试一下。