1

this is an example of my code :

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

for now when you press run effect the new div is add with slide effect but the old data is just appears at his new location after the insert i want the old data to be pushed down with the same slide effect and to be synchronized with the slide effect of the new inserted data and to continue doing that with every new data that is inserted

2
  • You have closing ul and div tags without opening the respective tags. Jul 15, 2013 at 12:55
  • it was a copy paste mistake
    – Roey Moyal
    Jul 15, 2013 at 12:58

1 Answer 1

0

You should add it as a hidden div and you should use blind effect instead of slide. Like this:

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

Check here: http://jsfiddle.net/balintbako/DCWWR/

1
  • i found the solution by combing the 2 like this $(temp).insertAfter('div#add').show("blind", { direction: "up", queue:false,speed:'slow' }).effect({effect:'slide',direction:'up',queue:false,speed:'slow'});
    – Roey Moyal
    Jul 15, 2013 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.