动画:在使用Jquery之后

Animating :after using Jquery

本文关键字：Jquery 之后 动画      更新时间：2023-09-26

我不能动画我的ul的: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")测试它。

不能访问:after，因为它不是DOM的一部分。因此，它不能被任何JavaScript访问。

有一个解决这个问题的方法。添加一个类到你想动画宽度的元素。

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

我还没有检查这段代码是否实际工作，但你可以试一试。

相关文章：