我有两个分页链接,可以触发jQuery动画。
动画的回调函数会触发第二个动画。
这很好,但是只有第一次调用函数时才有效。
每次调用后,第一个动画会起作用,第二个则不会,它只会改变CSS而没有实际效果。
我正在绞尽脑汁,但却毫无作用(也许这就是个双关语吧)。
function switchItem(e) {
e.preventDefault();
// If not current piece
if($(this).hasClass('light')) {
/* VARIABLES */
var container = $('.portfolio footer .portfolio_content');
var link = $(this).attr('id');
var newItem = $(this).html();
/*===================================================
* This is the Key part here
===================================================*/
/* FIRST ANIMATION */
container.animate({
'right':'-100%'
}, 300, 'swing',
// Callback Function
function() {
$(this).html('').css({'left':'-100%'});
$.get('inc/portfolio/'+link+'.php', function(data) {
container.html(data);
/* SECOND ANIMATION */
container.animate({
'left':'0%'
}, 300, 'swing');
});
});
}
}
这是演示链接:http://eoghanoloughlin.com/my_site/#portfolio,涉及到IT技术。