jQuery replaceWithで要素をスライドさせる方法は？

Question

私はjqueryの応答でこれを持っている：<h3 id="5" class="headline-content">Some headline </h3> 私は左から入るように見えるように、私はデータをスライドすることができますどのように思ったんだけど：dataが似ている

... 
     success: function(data) { 
     $(".headline").replaceWith(function() { 
      return $(data).hide().fadeIn(); 
     }); 

？

Answer 1

このソリューションはJQueryとJQuery UI（スライド左効果用）を使用しています。ここでは、function test(data)があなたの成功関数になります。 replaceWithは必要ありません。

var d = "<h3>Some headline </h3>"; 
 
test(d); 
 

 
function test(data) { 
 
    // Inject the result into the DOM element, but hide it at the same time 
 
    $(".headline").hide().html(data); 
 

 
    // toggle the visibility and animate the element coming in from the right 
 
    $(".headline").toggle("slide", {direction: "right"}); 
 
} 
 

.headline { font-size:2em; 
 
    width: 300px; 
 
    height: 2em; 
 
    background: #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type = "text/javascript" 
 
     src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<div class="headline"></div>