如何在jQuery replaceWith中滑动元素？

Question

我的jquery响应中有这个：

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

data的位置：<h3 id="5" class="headline-content">Some headline </h3> 我想知道如何滑动数据以使其看起来从左边进入？

Answer 1

此解决方案使用JQuery和JQuery UI（用于幻灯片左侧效果）。在这里，function test(data)将成为您的成功函数。 <{1}}没有必要。

＆＃13;

＆＃13;

replaceWith

＆＃13;

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"});
}
 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;