{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Min-width 0 doesn't work for buttons》','https://www.manongdao.com/q-1054634.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I wish to replace one button with another with a smooth animation and without changing the height of the element, as I'll have other buttons underneath them that I don't want to move (so I don't think that I can use .hide and .show and I want a right to left replacement anyway). I'm open to solutions using other technology, but note that I want this to run in all modern browsers on PC, Android and iOS.
I thought that I'd use JQuery ".animate". However when I set up the code sample below and click the button it doesn't shrink away to nothing (despite my setting min-width).
If this can't be fixed it will rather put a crimp in my special effect and overly complicate working around it (I'd have a jerk at the end when the first button, having reached non-zero minimum size, just vanishes and the other one is jumped to full size).
In the final version there would be another button after the first that would be expanded from 0px at the same time, but I presume (until told differently) that resolving the script below will also lead to how to start at 0px width.
Please help. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").animate({width:'0px'});
});
});
</script>
<style>
button {
min-width:0px;
height: 22px;
}
</style>
</head>
<body>
<button>Start Animation</button>
</body>
</html>
add below css to button
Alternatively you can directly add the CSS property on your code. have a look at DEMO.