我有一个动画菜单,该菜单可以在外部运行,但卡在返回的路径上,第一个(#section-1)完美返回,但其他两个(#section2,&#section3)部分却没有。有谁能够帮助我?
$(function() {
var outTranslate = {
'-webkit-transform': 'translateX(-100%)',
'-moz-transform': 'translateX(-100%)',
'-ms-transform': 'translateX(-100%)',
'-o-transform': 'translateX(-100%)',
'transform': 'translateX(-100%)',
'opacity': '0'
};
$("span.menu").click(function() {
$("#section-1").css(outTranslate, function() {
setTimeout(function() {
$("#section-2").css(outTranslate);
}, 100);
setTimeout(function() {
$("#section-3").css(outTranslate);
}, 200);
setTimeout(function() {
$("#menu-overlay").fadeOut(750, 'easeOutQuad');
}, 300);
});
});
});
最佳答案
设置css属性后,您将无法回调函数。因为具有回调不是异步的。尝试这个:
$(function() {
var outTranslate = {
'-webkit-transform': 'translateX(-100%)',
'-moz-transform': 'translateX(-100%)',
'-ms-transform': 'translateX(-100%)',
'-o-transform': 'translateX(-100%)',
'transform': 'translateX(-100%)',
'opacity': '0'
};
$("span.menu").click(function() {
$("#section-1").css(outTranslate);
setTimeout(function() {$("#section-2").css(outTranslate);}, 100);
setTimeout(function() {$("#section-3").css(outTranslate);}, 200);
setTimeout(function() {$("#menu-overlay").fadeOut(750, 'easeOutQuad');}, 300);
});
});
或此(使用过渡框架)(链接:http://ricostacruz.com/jquery.transit/):
$(function() {
var outTranslate = {
'-webkit-transform': 'translateX(-100%)',
'-moz-transform': 'translateX(-100%)',
'-ms-transform': 'translateX(-100%)',
'-o-transform': 'translateX(-100%)',
'transform': 'translateX(-100%)',
'opacity': '0'
};
$("span.menu").click(function() {
$("#section-1").transition(outTranslate, function(){
setTimeout(function() {$("#section-2").css(outTranslate);}, 100);
setTimeout(function() {$("#section-3").css(outTranslate);}, 200);
setTimeout(function() {$("#menu-overlay").fadeOut(750, 'easeOutQuad');}, 300);
});
});
});
关于javascript - JavaScript函数无法正常运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30460025/