Question

我希望顺利地在值和auto之间切换div的css宽度。我现在有这个，因为这是我知道的第二个最佳选择，几乎可以实现我想要的。

通过这样做，我希望创建一个与图像和名称一样宽的点击菜单。

$('#LoginButton').click(function(){
    $(this).css('width', 'auto'),
    $("#profile").delay(100).toggle(300);
});

我找到的其他切换功能不能用“auto”作为值，我觉得很奇怪。

在切换选项旁边，我希望div和它的内容“平滑”加宽，而不是在点击后弹出。

jsFiddle：http://jsfiddle.net/EverybdyLies/jaxpd/1/

谢谢。

Answer 1

Updated Fiddle

它没有优化，但它足够清晰（我希望），所以你可以看到另一种顺利完成它的方法。

$('#parent').mouseenter(function(){
        $("#LoginButton").css('width', '500'),
        $("#profile").delay(100).toggle(300);
});
$('#parent').mouseleave(function(){
        $("#LoginButton").css('width', '20'),
        $("#profile").delay(100).toggle(300);
});

Answer 2

您可以使用animateAuto插件http://jsfiddle.net/basarat/jaxpd/7/执行此操作：

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();

        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });  
}



$('#LoginButton').toggle(

function () {
    $(this).stop().animateAuto('width',600);
    $("#profile").delay(100).toggle(300);
},

function () {
    $(this).stop().animate({
        width: '20px'
    })
    $("#profile").delay(100).toggle(300);
});

更新要使用jquery 1.9及更高版本，切换功能行为已经发生了一些变化：http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed因此要将它与需要迁移插件的那些一起使用。使用jQuery 1.9进行示例并迁移1.1：http://jsfiddle.net/basarat/jaxpd/18/

Answer 3

有点像黑客，但尝试这样的事情。

$('#LoginButton').click(function()
{
    // Show the menu, but offscreen
    var profile = $('#profile')
        .css('position', 'absolute')
        .css('left', '-10000px')
        .css('top', '0')
        .show ();

    // Get the width of the menu
    var width = profile.width ();

    // Hide the menu and put it back into document flow
    profile
        .hide()
        .css('position', 'static')
        .delay(100)
        .toggle(300);

    // Resize the login button
$(this).animate({'width': width}, 500);
});

更新了小提琴here

Answer 4

问题的症结在于，没有人再谈论$.stop(true,false).animate({width: 'toggle'});（已弃用？）。

此外，display:inline-block非常有用，如果您不想占用所有可用空间但又不希望您的元素像display:inline那样过度推崇。

我稍微改变了一下以显示它是如何完成的，但是仍然需要做一些工作来使文本正确显示。

http://jsfiddle.net/CTms3/2/

jQuery（以及任何其他动画的js lib）仍然优越，因为css3过渡（动画）仍然不会占用auto或者在使用transform: scale缩小时折叠元素使用的空间（也许有办法，但我不知道它是什么。）

我还建议您使用上面的第一个代码直接操作大多数动画。如果您在小提琴中快速单击该按钮，您会注意到#username在每次点击时更改了方向，而#profile尚未来回。这是因为stop(true,false)。它会在css实际设置为最终状态时中断动画。非常方便。

你的轨道很棒。如果您想要在问题中添加更多详细信息，或者想要弄清楚如何正确显示#username中的文字，请在新版本中进行询问，因为这个版本很可能会在其“核心”处回答。

jQuery在值和auto之间平滑切换css宽度

4 个答案: