Somename Somename - 3 months ago 6
jQuery Question

Animation for/in jquery added text

I want to add animation to the class "text-to-right" in the following code:



$(".newul li").on("click", function() {

var myval = $(this).html();
var newtext = "dummy text";

$(".someclass").html(myval + "<span class='text-to-right'>" + newtext + "</span>");
});

<div class="someclass"></div>
<ul class="newul">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>





The HTML for the class "someclass" appears fine. But how can I make the
newtext
appear with some animation?

Answer

If you just want any simple effect to make it more smooth try initial hide with CSS and then show with fadeIn()from Jquery :

$(".newul li").on("click", function() {
  var myval = $(this).html();
  var newtext = "dummy text";
  $(".someclass").html(myval + "<span class='text-to-right'>" + newtext + "</span>").slideDown();
  $('.text-to-right').fadeIn();
});
.text-to-right, .someclass {
  display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass"></div>
<ul class="newul">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>