在jQuery和wordpress中删除图像时添加动画

时间:2014-01-15 09:53:34

标签: javascript jquery wordpress

我有一个带有喜欢的图片或用户的图库,用户可以通过删除删除他们不喜欢的图像。删除图像后,将显示下一个图像以代替删除的图像。我想添加一些动画,以便看起来好像下一张图片会滑入。

我使用以下代码显示并从页面中删除图像。

setTimeout(function(){ g(".justified-image-grid").css({opacity:1}); },500);
}
g(document).ready(function(){
fillFav();
g(".fav_icon").live('click',function(){
var id2 = g(this).attr("id");
if(id2 == 2) {   
var url = window.location.href;
var data = g(this).attr('data');
var itemtoRemove = data;
imgs.splice(g.inArray(itemtoRemove, imgs),1);
var th = g(this); th.addClass("proce");
th.parent(".jig-imageContainer").css({'opacity':.6});
g.ajax({url:url,method:'GET',data:{'did':data}}).done(function(data){
th.attr("id","1"); th.parent(".jig-imageContainer").remove(); th.html(data); });
}

});

g("#jig1-filterButtons").live('click',function(){
 g(".justified-image-grid").css({opacity:0});
 setTimeout(function(){ fillFav(); },100);
});
});

提前致谢

1 个答案:

答案 0 :(得分:0)

你可能想试试这个。

淡出并删除

th.parent(".jig-imageContainer").hide('slow', function(){ th.parent(".jig-imageContainer").remove() });

淡入淡出和添加HTML:

display:none样式添加到要附加的html中。然后试试这个:

th.html(data).fadeIn('slow');