Question

我想要一个带按钮的按钮组，当用户将鼠标悬停在按钮组上时，使用jQuery .show("slide", {direction: 'right'})在按钮内插入更多内容。正如您在小提琴中看到的那样，我将其部分工作，但是当鼠标悬停在按钮上时，按钮会立即增长，以便考虑文本完成时滑动到的空间。有没有办法让按钮的宽度跟随滑动元素的宽度？

小提琴：https://jsfiddle.net/k7ypusdq/1/

$(document).ready(function() {
  $("#new-hidden").hide();
  $("#new-button").hover(function() {
    $("#new-hidden").show("slide", {
      direction: 'right'
    }, 300);
  }, function() {
    $("#new-hidden").hide("slide", {
      direction: 'right'
    });
  });
});

@import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
  background-color: #339999;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.big-button {}

.button-group {
  float: right;
}

.button-group a,
button {
  background-color: #9fc;
  color: #acc;
  font-family: 'Passion One', cursive;
  font-size: 24pt;
  padding: 10px;
  border: 1px solid #3a8;
  border-bottom-width: 4px;
  float: left;
  width: auto;
}

.button-group button:first-child {
  border-radius: 10px 0px 0px 10px;
}

.button-group button:last-child {
  border-radius: 0px 10px 10px 0px;
}

.button-group:after {
  content: "";
  clear: both;
  display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<html>

<body>
  <div class="button-group">
    <button id="new-button">
        <div style="float: left">Hello!</div>
        <span id="new-hidden" style="overflow: hidden;">
          I'm here too!
        </span>
      </button>
    <button>Middle</button>
    <button>Other Stuff</button>
  </div>
</body>

</html>

Answer 1

您可以通过设置宽度并防止文本换行来简化它：

<html>
  <body>
    <div class="button-group">
      <button id="new-button" style="text-align:left;text-wrap:none;overflow:hidden;width:100px;height:60px;line-height:40px">
        Hello! I'm here too
      </button>
      <button>Middle</button>
      <button>Other Stuff</button>
    </div>
  </body>
</html>


$(document).ready(function(){
      $("#new-hidden").hide();
      $("#new-button").hover(function(){
        $("#new-button").animate({"width": 250}, 300);
      }, function(){
        $("#new-button").animate({"width": 100}, 300);
      });
    });

https://jsfiddle.net/k7ypusdq/42/

Answer 2

如果您正在寻找一种动态方法，可以获得您添加的任何文本的宽度，而无需设置固定宽度，您可以执行以下操作。

$(document).ready(function() {

    // Store each hidden elements width within a data-width attribute. 
    // Set hidden elements width to zero.
    $('.btn-with-text .hidden').each(function() {

        $(this).data('width', $(this).outerWidth());
        $(this).css({'width': 0});

    })
    
    $('.btn-with-text').hover(function() {
        
        var hiddenBtn = $(this).find('.hidden');
        
        // On HoverIn apply and animate the stored data-width and apply left margin
        hiddenBtn.animate({
            marginLeft: 10,
            width: hiddenBtn.data('width')
        }, 300);

    }, function() {
        
        // On HoverOut set width and margin back to zero.
        $(this).find('.hidden').animate({
            marginLeft: 0,
            width: 0
        }, 300);

    });
});

@import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
    background-color: #339999;
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.big-button {}

.button-group {
    float: right;
}

.button-group a,
button {
    background-color: #9fc;
    color: #acc;
    font-family: 'Passion One', cursive;
    font-size: 24pt;
    padding: 10px;
    border: 1px solid #3a8;
    border-bottom-width: 4px;
    float: left;
    width: auto;
}

.button-group button:first-child {
    border-radius: 10px 0px 0px 10px;
}

.button-group button:last-child {
    border-radius: 0px 10px 10px 0px;
}

.button-group:after {
    content: "";
    clear: both;
    display: table;
}


/*
    Add this CSS
*/

button {
    overflow: hidden;
    position: relative;
}

button .not-hidden {
    display: inline-block;
    float: left;
}

button .hidden {
    overflow: hidden;
    white-space: nowrap;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="button-group">
    <button class="button btn-with-text">
        <span class="not-hidden">Hello!</span>
        <span class="hidden">
            I'm here too!
        </span>
    </button>
    <button class="button btn-with-text">
        <span class="not-hidden">Middle</span>
        <span class="hidden">
          I'm Another One!
        </span>
    </button>
    <button class="button">Other Stuff</button>
</div>

jQuery更改包含带幻灯片的元素宽度

2 个答案: