0

我希望在值和自动之间平滑切换 div 的 css 宽度。我目前有这个，因为这是我知道实现几乎我想要的第二好的选择。

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

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

我发现的其他切换功能不适用于“auto”作为值，我觉得这很奇怪。

在切换选项旁边，我希望 div 及其内容“平滑”变宽，而不是在单击后弹出。

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

谢谢你。

4

4 回答 4

0

更新小提琴

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

$('#parent').mouseenter(function(){
        $("#LoginButton").css('width', '500'),
        $("#profile").delay(100).toggle(300);
});
$('#parent').mouseleave(function(){
        $("#LoginButton").css('width', '20'),
        $("#profile").delay(100).toggle(300);
});
于 2013-04-05T00:31:55.850 回答
0

您可以使用 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/

于 2013-04-05T00:46:43.090 回答
0

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

$('#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);
});

在这里更新小提琴

于 2013-04-05T01:18:02.127 回答
0

问题的症结在于没有人$.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正确显示文本，请提出新问题，因为这个问题很可能在其核心得到回答。

于 2013-04-05T03:15:52.820 回答