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

现在当您按下运行效果时，新的div将添加幻灯片效果但旧的数据只会在插入后出现在他的新位置我希望以相同的幻灯片效果推下旧数据，并与新插入数据的幻灯片效果同步，并继续对插入的每个新数据执行此操作

Answer 1

您应该将其添加为隐藏div，并且应使用blind效果而不是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/

添加带滑动效果的新div

1 个答案: