Animieren: nach der Verwendung von Jquery

Question

kann ich die :after meiner ul nicht animieren. Hier ist der Code in CSS:

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

und dies ist meine Jquery Codes

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

der Klick funktioniert. Ich teste es mit console.log("click"). Kann mir jemand helfen ...

Answer 1

Sie können nicht zugreifen: nach, denn es ist kein Teil der DOM. Daher ist es mit keinem JavaScript zugänglich.

Es gibt jedoch einen Workaround dafür. Fügen Sie dem Element, für das Sie die Breite jquery animieren möchten, eine Klasse hinzu.

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

Dann animieren Sie es mit CSS.

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

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

Ich habe nicht überprüft, ob dieser Code tatsächlich funktioniert, aber Sie können es versuchen.