有可能同时在两个不同的元素上运行两个动画吗?我需要这个问题的反面Jquery排队动画。
我需要做这样的事情……
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
但要同时处理这两件事。我能想到的唯一方法是为每个动画使用一次setTimeout,但我不认为这是最好的解决方案。
有可能同时在两个不同的元素上运行两个动画吗?我需要这个问题的反面Jquery排队动画。
我需要做这样的事情……
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
但要同时处理这两件事。我能想到的唯一方法是为每个动画使用一次setTimeout,但我不认为这是最好的解决方案。
当前回答
发布我的答案是为了帮助别人,排名最高的答案并没有解决我的疑虑。
当我实现以下[从顶部的答案]时,我的垂直滚动动画只是来回抖动:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
我提到:W3学校设置间隔,它解决了我的问题,即“语法”部分:
setInterval(函数,毫秒,param1, param2,…)
将我的形式为{duration: 200, queue: false}的参数强制设置为零的持续时间,它只查看参数进行指导。
长和短,这是我的代码,如果你想了解它为什么工作,阅读链接或分析区间预期参数:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
其中'autoScroll'是:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
编码快乐!
其他回答
我相信我在jQuery文档中找到了解决方案:
动画所有段落为左样式 50度,不透明度为1(不透明, 可见),完成动画 在500毫秒之内。它也会 在队列外做,意思是吗 将自动启动 等待轮到它。 $("p").animate({ 左:“50px”,不透明度:1 }, {duration: 500, queue: false});
只需添加:queue: false。
是的,有!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
看看这篇关于对象中动画值的精彩博文。然后你可以使用这些值来动画你喜欢的任何东西,100%同时!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
我用它来滑动:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}
发布我的答案是为了帮助别人,排名最高的答案并没有解决我的疑虑。
当我实现以下[从顶部的答案]时,我的垂直滚动动画只是来回抖动:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
我提到:W3学校设置间隔,它解决了我的问题,即“语法”部分:
setInterval(函数,毫秒,param1, param2,…)
将我的形式为{duration: 200, queue: false}的参数强制设置为零的持续时间,它只查看参数进行指导。
长和短,这是我的代码,如果你想了解它为什么工作,阅读链接或分析区间预期参数:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
其中'autoScroll'是:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
编码快乐!
会同时运行是的。 如果你想在同一个元素上同时运行两个动画呢?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
这最终导致动画排队。 要同时运行它们,您只需使用一行。
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
有没有其他方法可以同时在同一个元素上运行两个不同的动画?