1

これは私のコードの例です:

<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 がスライド効果で追加されますが、挿入後に古いデータが新しい場所に表示されるだけです。古いデータを同じスライド効果で押し下げ、スライドと同期させたい新しく挿入されたデータの効果と、挿入されたすべての新しいデータでそれを続けること

4

1 に答える 1

0

非表示として追加する必要があり、の代わりに効果divを使用する必要があります。このような：blindslide

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/

于 2013-07-15T13:14:55.767 に答える