JQuery Css speed implementation

Question

I want to make a border-bottom to my li with a speed. How can I solve this?

My code:

    $(document).ready(function(){
        $("#mi").mouseover(function(){
            $("#mi").css({"border-bottom": "1px solid #fff"});
        },800);
    });

Do you mean you want the border to fade in? Use .animate(). — Barmar
– Barmar, Commented Dec 30, 2019 at 19:59
withput animation I want to make a border-bottom with a slow motion. — Alp Eren Gül
– Alp Eren Gül, Commented Dec 30, 2019 at 20:34
I think you have to use .animate(). See stackoverflow.com/questions/16793360/… for an example. — Barmar
– Barmar, Commented Dec 30, 2019 at 20:41
$(document).ready(function(){ $("#mi").mouseover(function(){ $("#mi").css({"border-bottom": "0px solid #fff"}).animate({ borderbottom: 1 }, 500);; }); }); I tried this but it doesnt work. — Alp Eren Gül
– Alp Eren Gül, Commented Dec 30, 2019 at 21:02

Barmar · Accepted Answer · 2019-12-30 21:04:45Z

1

You need to animate the border-bottom-width property.

$(document).ready(function() {
  $("#mi").mouseover(function() {
    $("#mi").css({
      "border-bottom": "0px solid #fff"
    }).animate({
      borderBottomWidth: 1
    }, 500);;
  });
});

answered Dec 30, 2019 at 21:04

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Css speed implementation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related