Question

我有一个情况，我有一个按钮，后面有一个对象。最初对象的宽度为0.想法是，当单击按钮时，它会扩展为“精确宽度”。

文本可以有不同的长度。我所知道的是它永远不会超过1行，所以我不担心包装。

我做了一个小模型（当然不工作），我描述的情况。有人可以告诉我怎么做到这一点吗？

MOckup：http://codepen.io/dbugger/pen/HbyLr

我想改编的JS代码：

$(".handler").on("click", function(){

    if($(this).hasClass("open")){
        $(".elastic").animate({width:"0px"});
        $(this).removeClass("open");
    } else {
        // Here i cant animate to auto
        $(".elastic").animate({width:"auto"});
        // This works, but there is no animation...
        $(".elastic").css({width:"auto"});
        $(this).addClass("open");
    }

});

Answer 1

您可以做的是将文本包装在另一个元素上：

<div class="elastic">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, laboriosam.</div>
</div>

然后使用CSS更改display属性，以便获得宽度val。

.elastic div {
  white-space:nowrap;
  display:inline-block;
}

使用jQuery将该值作为var

else {
   var siz = $(this).next('.elastic').find('div').width();
   $(".elastic").animate({width:siz});
   $(this).addClass("open");
}

选中 Demo Codepen

Answer 2

您无法设置auto长度的动画（至少使用jQuery动画）。

你可能会考虑做的是在它周围放一个容器：

<div class="elasticContainer">
    <span class="elastic">Some text here</span>
</div>

设置容器的CSS以防止overflow：

.elasticContainer {
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    white-space:nowrap;
]

然后在你的jQuery中，你可以获得span的长度并为其制作动画：

var $elastic = $(.elastic),
    $elasticContainer = $elastic.parent(),
    elasticWidth = $elastic.width();

$elasticContainer.width(0);

$('.handler').on('click',function(){
    var $self = $(this);

    if($self.hasClass('open')){
        $elasticContainer
            .stop()
            .animate({
                width:elasticWidth
            });
    } else {
        $elasticContainer
            .stop()
            .animate({
                width:0
            });
    }
});

这应该提供一个单一，干净的过渡，可以根据您的意愿显示/隐藏（我认为）。

如果你有许多不同的弹性盒子，你需要动态获得宽度：

var $elasticContainers = $(.elastic).parent();

$elasticContainers.width(0);

$('.handler').on('click',function(){
    var $self = $(this),
        $nextElasticContainer = $self.nextUntil('.elasticContainer');

    if($self.hasClass('open')){
        $nextElasticContainer
            .stop()
            .animate({
                width:($nextElasticContainer.find('.elastic').width())
            });
    } else {
        $nextElasticContainer
            .stop()
            .animate({
                width:0
            });
    }
});

哪个应该足够动态。

Answer 3

很遗憾，您无法设置auto值的动画（至少CSS的情况如此，我相信jQuery中的animate方法的行为非常相似）。

但是，您可以使用min-width或max-width设置动画并将值设置为确定的像素值。以下是使用已定义的max-width

工作的示例

$(".handler").on("click", function(){

  if($(this).hasClass("open")){
    $(".elastic").animate({"min-width":"0px", "width": "0px"});
    $(this).removeClass("open");
  } else {
    $(".elastic").animate({"width":"auto", "min-width":"500px"});
    $(this).addClass("open");
  }

});

将内联元素扩展为其自动宽度

3 个答案: