html li元素移动,JQuery 两个ul标签中的li互相移动(动画淡入淡出)

两个ul标签中的li互相移动

ul{list-style-type:none;float:left;margin-right:30px;background-color:Green;width:100px;height:100px;padding:0px;}

li{margin-bottom:5px;background-color:Red;}

var myJson = [{ "id": "1", "Name": "刘德华", "Age": "52" },

{ "id": "2", "Name": "文章", "Age": "26" },

{ "id": "3", "Name": "孙红雷", "Age": "40" },

{ "id": "4", "Name": "葛优", "Age": "58"}];

$(function () {

//动态添加Json数据到leftUL中

var $leftUL = $("#leftUL");

var $rightUL = $("#rightUL");

for (var i = 0; i < myJson.length; i++) {

$myLi = $("

" + myJson[i].Name +

"," + myJson[i].Age + "岁

");

$myLi.click(function () {

if ($(this).parent().attr("id") == "leftUL") {        //通过判断父元素的ID来控制往哪个UL添加

$(this).fadeOut(1000, function () {

$(this).appendTo($rightUL);

$(this).fadeIn(1000);

});

}

else {

$(this).fadeOut(1000, function () {                                            $(this).appendTo($leftUL);                                            $(this).fadeIn(1000);                                        });                                    }                                });                                $leftUL.append($myLi);                            }                        });