附加一个带有幻灯片效果的新 div答案

【问题标题】：append a new div with slide effect附加一个带有幻灯片效果的新 div
【发布时间】：2013-07-13 08:14:26
【问题描述】：

这是我的代码示例：

<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 会添加幻灯片效果，但旧数据仅在插入后出现在他的新位置我希望旧数据以相同的幻灯片效果下推，并与新插入数据的幻灯片效果同步，并继续对插入的每个新数据执行此操作

【问题讨论】：

您已经关闭了ul 和div 标签，而没有打开相应的标签。
复制粘贴错误

标签： jquery jquery-ui html slide

【解决方案1】：

您应该将其添加为隐藏的div，并且应该使用blind 效果而不是slide。像这样：

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/

【讨论】：

我通过像这样组合 2 找到了解决方案 $(temp).insertAfter('div#add').show("blind", { direction: "up", queue:false,speed :'slow' }).effect({effect:'slide',direction:'up',queue:false,speed:'slow'});