[英]How to animate elements being loaded using jQuery load method
I am using ajax to load a new form once the old form has been submitted. 提交旧表单后,我正在使用ajax加载新表单。 the code looks like below:
代码如下所示:
$(document).on('click', '.next', function() {
if ($(this).hasClass('disabled')) {
return false;
}
var toLoad = $(this).attr('href') + '#content';
$('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() {
loadContent();
});
// $('#main-container').animate({ 'opacity': 1 }, loadContent);
window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);
function loadContent() {
$('#main-container').load(toLoad, '', showNewContent())
}
function showNewContent() {
$('#main-container').show('normal');
}
return false;
});
/* enable next button */
$(document).on('change', '[type="radio"]', function() {
var checked_no = $('[type="radio"]:checked').length;
if (checked_no > 0) {
$('.btn-next').removeClass('disabled');
}
});
Now i would like to have a transition animation , when the 1st form is submitted it slides to the left and from the right the new slide comes in , just like in a normal slider caousel. 现在,我想制作一个过渡动画,当提交第一个表单时,它会向左滑动,新的幻灯片会从右侧滑动进来,就像在普通滑块中一样。
When the 1st form is submitted i managed to get a animation for it to slide to the left and it exactly what i want , i used a plugin transit.js and just used the below lines of code to acheive the transition: 提交第一种表单时,我设法获得了一个动画,使其可以向左滑动,并且恰好是我想要的,我使用了一个插件transit.js,并仅使用了以下几行代码来实现过渡:
$('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() {
loadContent();
});
but now how to i transition the content being loaded ? 但是现在我该如何过渡要加载的内容? as of now it just loads using the load function and thats quite lame , i understand that the difficulty level to do this next animation is slightly higher and i am unable to think of a way to get this content to load with an animation(An animation that slides in from the right).
截至目前,它只是使用加载功能进行加载,这相当la脚,我知道制作下一个动画的难度级别略高,并且我无法想到一种方法来使该内容随动画一起加载(动画从右侧滑入)。
So how exactly do i animate content being loaded using the load jQuery method and transit.js ?? 那么我如何使用加载jQuery方法和transit.js来为正在加载的内容制作动画呢?
Here's my suggestion in 4 steps: 这是我的4个步骤的建议:
The code looks like this 代码看起来像这样
$('#main-container').transition({ 'x' : '-100%' , duration:700 } , function() {
$('#main-container').css('x','100%');
loadContent();
});
function loadContent() {
$('#main-container').load(toLoad, '', showNewContent())
}
function showNewContent() {
$('#main-container').show('normal');
$('#main-container').transition({ 'x' : '0' , duration:700 });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.