javascript - JSCSS: how to animate a circle to pill shape? - Stack Overflow

admin管理员组

文章数量:1313099

Ok this is what I'm trying to achieve (ideally with JS/jQuery):

On hover, I need a circular div to expand into a pill shape so other buttons can pop in within it. When I click the "x" again, I need it to roll back to a circle shape.

I only know how to scale things with JS/jQuery. How can I do this? I can't find anything just searching with plugins.

Ok this is what I'm trying to achieve (ideally with JS/jQuery): https://dribbble./shots/3445331-Expanding-Button

On hover, I need a circular div to expand into a pill shape so other buttons can pop in within it. When I click the "x" again, I need it to roll back to a circle shape.

I only know how to scale things with JS/jQuery. How can I do this? I can't find anything just searching with plugins.

• javascript
• jquery
• html
• css
• jquery-animate

Share Improve this question Follow edited Feb 7, 2018 at 19:34 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Jan 5, 2018 at 3:16 blueblue 7,3951616 gold badges9090 silver badges198198 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

@mari Lai is right on. If you think of the containing div as a single rectangle with a changing width and consistent border radiuses then it's really pretty straight forward. (you can trigger this with jQuery/JS or simply hover/focus css)

Something like this...

.pill { 
  width: 50px; 
  height: 50px; 
  border-radius: 25px;
  background-color: #898989;
  transition: width .5s ease;
}
.pill:hover, .pill:focus { 
  width: 240px;
}

<div class="pill">
</div>

Instead of thinking that it is a circle to a pill shape, maybe try making it a square div, that changes the width to more of a rectangle on hover.

Then you would only have to make the border-radius rounded to look like a circle/pill shaped. Hope that makes sense.

So that "circle" in the beginning is a div with class circle, say with the following CSS:

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

Then you could change that to the following:

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    transition: width ease 0.3s;
}

So now the circle can animate width changes. We could define a "pill" width again with a class:

.pill {
    width: 300px;
}

And if you want to use jQuery to trigger the width change on a click, we can do the following: toggle the pill class on the circle div

$(".circle").on("click", function() {
    $(".circle").toggleClass("pill");
});

Of course to acodate more buttons inside the "circle" div, you would use another selector for the click action, but you get the point :)

:edit: Here's a fiddle for that: https://jsfiddle/6g0z3390/

:edit2: I just realized you didn't want the change on click but on hover. In that case you could simply drop the JS and change the css from .pill to .circle:hover :)

本文标签： javascriptJSCSS how to animate a circle to pill shapeStack Overflow