Tengo un botón y quiero cambiar su etiqueta de digamos 1 a 2, para que 1 se deslice hacia arriba y mientras tanto 2 lo reemplace. Es lo que probé en el fragmento. Sin embargo, nada se muestra al final. Tenga en cuenta que 1 y 2 son ejemplos, en general, debe reemplazar el valor anterior con un valor nuevo en un evento.

$('#slideIndexBox').slideDown().promise().done(function() {
  $(this).text('2');
  $(this).slideUp();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="indicator" class="btn mb-2 btn-block btn-outline-info ">
  <!--<span id="slideIndicator"></span>-->
  <span id="slideIndexBox">1</span>
</button>
3
Ahmad 2 oct. 2019 a las 16:55

3 respuestas

La mejor respuesta

Si entiendo el efecto que busca, agregaría un nuevo elemento cada vez que se incremente el número. Estos números podrían agregarse a un contenedor, y con cada clic, el contenedor se deslizaría hacia arriba para revelar el elemento recién agregado.

Se vería algo así:

$("#indicator").click(function() {
  let number = $(".slideIndexBox", this).length + 1;
  let $num = $("<span class='slideIndexBox' />");
  $num.text(number);
  
  let $container = $(".slideContainer", this);
  let height = Math.round($(this).css("height").replace("px",""));
  $container
    .append($num)
    .css("transform", `translateY(-${(number-1)*height}px)`);
});
button {
  width: 30px;
  height: 30px;
  overflow: hidden;
  padding: 0;
}

.slideIndexBox {
  display: block;
  height: 30px;
  width: 100%;
  text-align: center;
  transform: translateY(6px);
}

.slideContainer {
  display: block;
  transition: transform 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="indicator" class="btn mb-2 btn-block btn-outline-info ">
  <span class="slideContainer">
    <span class="slideIndexBox">1</span>
  </span>
</button>
1
Tyler Roper 2 oct. 2019 a las 14:25

Por favor pruebalo:

<button>
  <label class="show">1</label>
  <label class="hide">2</label>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('button').on( 'click', function() {
    $(this).find('.hide').slideDown();
    $(this).find('.show').slideUp();
});
</script>

<style>
.show { display: block; }
.hide { display: none; }
</style>
2
Code Maniac 2 oct. 2019 a las 14:07

Podrías hacer esto, pero se desplazará hacia la parte superior después de la última. En este caso a continuación, acabo de agregar todos los elementos desde el principio, ya que le dará a su botón un ancho preciso. Puede agregar elementos a medida que lo desee, pero el botón cambiará de ancho en ese caso.

Sin embargo, esta solución requerirá que el texto de su botón esté en una línea para funcionar. Además, la altura del botón es arbitraria en el CSS.

$('#indicator').on('click', function () {
  var $container = $('div', this),
    index = ($container.data('i') || 0) + 1;
  if (index + 1 > $('span', $container).length) {
    $container.data('i', 0);
    $container.css('transform', 'translateY(0)');
  } else {
    $container.data('i', index);
    $container.css('transform', 'translateY(' + -$('span', this).height() * index + 'px)');
  }
});
.btn { height: 1.5em; overflow: hidden; display: inline-block; }
.btn span {
  display: block;
}
.btn div {
  transform: translateY(0);
  transition: transform 0.5s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="indicator" class="btn mb-2 btn-block btn-outline-info ">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>Moar content</span>
  </div>
</button>

Sin embargo, veo que debe reemplazar el valor, por lo que es posible que esto no sea lo que está buscando.

0
russinkungen 2 oct. 2019 a las 15:07