アニメーションのために/私は、次のコードでは、クラス「テキストから右へ」にアニメーションを追加するjqueryの追加テキスト

Question

中：

$(".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>

クラスのHTML「工ass "うまく表示されます。しかし、どうすればnewtextにアニメーションが表示されるのですか？

Answer 1

あなたはそれがよりスムーズCSSで最初の非表示をしようとし、その後のjQueryからfadeIn()と表示させる任意の単純な効果をしたい場合：

$(".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>