How to add animation moving effect to up and down sort movement.
You can check the movement by clicking on the UP and DOWN text links.
Here is my code
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
});
$('.move-down').click(function(){
if ($(this).next())
$(this).parent().insertAfter($(this).parent().next());
});
});
just add the a sequence of hide and show, easy!
jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');
Maybe something like this could help you : http://jsfiddle.net/eJk3R/38/
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev()){
var t = $(this);
t.parent().animate({top: '-20px'}, 500, function(){
t.parent().prev().animate({top: '20px'}, 500, function(){
t.parent().css('top', '0px');
t.parent().prev().css('top', '0px');
t.parent().insertBefore(t.parent().prev());
});
});
}
});
$('.move-down').click(function(){
if ($(this).next()){
var t = $(this);
t.parent().animate({top: '20px'}, 500, function(){
t.parent().next().animate({top: '-20px'}, 500, function(){
t.parent().css('top', '0px');
t.parent().next().css('top', '0px');
t.parent().insertAfter(t.parent().next());
});
});
}
});
});
It's far from perfect, you'll need to clean up the code a little bit and test the presence of an element before and after a little better before fireing the animation.
I also added position: relative; to the span style.
I met the same demand here, to add move animation for item list. I first want to use jquery animate to do this. But I'm using table and tr as list and list item, and I find animations are not supported on table rows after some search (You can check this link to read more about this). So I managed to use other solutions. Finally I made it out by using CSS3 transform and transition.
Here is the code:
/**
* @param {Object} $fstElem target item
* @param {Object} $scdElem swapped item
* @param {Number} dirflag move direction flag, 2 is up, 1 is down.
* @param {Function} cb callback
*/
function animatedMove($fstElem, $scdElem, dirflag, cb) {
var fstdir, scddir;
// move up
if (dirflag == 2) {
fstdir = '-';
scddir = '';
} else if(dirflag == 1){
// move down
fstdir = '';
scddir = '-';
}
// add animations
$fstElem.css({
transform: 'translateY('+fstdir+$scdElem.height()+'px)',
transition: 'transform 0.4s'
})
$scdElem.css({
transform: 'translateY('+scddir+$fstElem.height()+'px)',
transition: 'transform 0.4s'
})
// unset css3 properties and swap item, do some callbacks if you want
setTimeout(function(){
$fstElem.css({
transform: 'none',
transition: 'unset'
})
$scdElem.css({
transform: 'none',
transition: 'unset'
})
if (dirflag == 2) {
$fstElem.after($scdElem)
} else if(dirflag == 1){
$fstElem.before($scdElem)
}
cb && cb()
}, 400)
}
Here is jsfiddle: DEMO
Use .animate to generate the animation.
For instance,
$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});
I hope this is what you are looking for -> DEMO
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
$(this).parent().animate({
opacity: 0.1
}, 1500 );
This code was work for me 100%. The code pen url here https://codepen.io/dineshnisshanka/pen/KKPzXJB
<html>
<heade>
<style>
body {
margin: 0;
padding: 0;
}
.main_sec
{
display:inline-block;
width:100%;
max-width: 500px;
position: relative;
}
.main_sec .sections {
display:inline-block;
width:100%;
padding:5px;
position: relative;
z-index: 5;
box-sizing: border-box;
}
.main_sec .sections + .sections{
z-index: 10;
}
.main_sec .sections.sec_01 {
background-color: blueviolet;
}
.main_sec .sections.sec_02 {
background-color: royalblue;
}
.main_sec .sections span {
display:inline-block;
float:left;
}
.main_sec .sections a{
display:inline-block;
float:right;
cursor:pointer;
background-color:red;
padding:5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('as');
});
function swap_down()
{
//alert('asa');
var set_01 = $(".main_sec .sections.live").height() + 10;
var set_02 = $(".main_sec .sections:not(.live)").height() + 10;
console.log('set_01',set_01)
console.log('set_02',set_02)
$( ".main_sec .sections.live").animate({top: '-'+set_02+'px'}, 500);
$( ".main_sec .sections:not(.live)").animate({bottom:'-'+set_01+'px' }, 500, function(){
$( ".main_sec .sections:not(.live)" )
.insertAfter( $( ".main_sec .sections.live"));
$(".main_sec .sections:not(.live)").css("bottom","0");
$(".main_sec .sections.live").css("top","0");
$(".main_sec .sections").toggleClass('live');
$(".main_sec .sections").removeAttr("style");
});
$( ".main_sec .sections.live").removeClass('live');
$( ".main_sec .sections+.sections").addClass('live');
//$( ".main_sec .sections.live").animate({top: '0px'}, 500);
//$( ".main_sec .sections:not(.live)").animate({bottom: '0px'}, 500);
}
</script>
</heade>
<body>
<div class="main_sec">
<div class="sections sec_01 " ><span>section 01</span> <a class="move-down" onclick="swap_down();" >swaping 01</a> </div>
<div class="sections sec_02 live" ><span>section 02</span> <a class="move-down" onclick="swap_down();">swaping 02</a>
<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut </div>
</div>
</body>
</html>
