附加一个带有滑动效果的新div

Question

这是我的代码示例：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Effects - Effect demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="test.js" type="text/javascript"></script>
</head>
<body>

<div class="toggler">
  <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
    <div id="add">
    </div>  
    <div id="oldli" class="newclass">
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</div>
</body>
</html>

jquery (test.js)：

$(function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = 'slide';

      // most effect types need no options passed by default
      var options = {};

      // run the effect

      var temp = '<div class=""><div>1</div><div>2</div><div>3</div><div>4</div></div>'
    $(temp).insertAfter('div#add').effect({effect:'slide',direction:'up',queue:false});

    };

    // callback function to bring a hidden box back
    function callback() {

    };

    // set effect from select menu value
    $( "#button" ).click(function() {
      runEffect();
      return false;
    });
  }); 

现在，当你按run effect时，新的div是用滑动效果添加的，但旧数据只是在插入后出现在他的新位置。我希望旧数据以相同的滑动效果下推，并与新插入数据的滑动效果同步，并继续对插入的每个新数据执行此操作。

Answer 1

您应该将其添加为隐藏的div，并且应该使用blind effect而不是slide。如下所示：

JS

var temp = '<div class="newli"><div>1</div><div>2</div><div>3</div><div>4</div></div>';
function runEffect() {
      $(temp).insertAfter('#add').show("blind", {
        direction: "up"
    }, 1000);
};

CSS

.newli {
    display: none;
}

点击这里：http://jsfiddle.net/balintbako/DCWWR/