this example of 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 selected effect function runeffect() { // effect type var selectedeffect = 'slide'; // effect types need no options passed default var options = {}; // run 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 bring hidden box function callback() { }; // set effect select menu value $( "#button" ).click(function() { runeffect(); return false; }); }); for when press run effect new div add slide effect old data appears @ new location after insert want old data pushed down same slide effect , synchronized slide effect of new inserted data , continue doing every new data inserted
you should add hidden div , should use blind effect instead of slide. 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/
Comments
Post a Comment