如何在同一元素上进行并行动画
这是小提琴中的代码！
这是实际地点！
问题1:当我调用函数时，当我单击enter时，它们不会在彼此之间执行，如果它并行并同时执行所有操作，它有时会工作！但这不是真正的问题，这是我想要的一些建议！
问题实际:当我调用enter时，我切换所有的类，然后在div.third上做一个并行动画(使背景变成绿色或红色，然后淡出)，问题是，当我做的足够快时，它不会调整div.fourth的大小直到背景动画完成。因此，我认为解决方案应该是一个并行动画，它不与主动画交互，因此switchClases()。
所有魔法发生的代码：
// Do everytime we press a key
$(document).keydown(function(){
// By presing 'Enter' we call exec.
$("#wraper input.third").bind('keydown',function(e){
// Make key variable by phrasing the event
var keyPresed = (e.keyCode ? e.keyCode : e.which);
// Allow only backspace, delete and enter
if (keyPresed == 46 || keyPresed == 8 || keyPresed == 13){
// If this is true animation is still in progress
if (transAct) {
// OBLIVION
}
// Or else start another animation and execution
else{
// If 'enter' is pressed then and new row and execute everything
if((keyPresed == 13) && $("input.third").val()){
//Set the new uniqueId
uniqueId++;
$("div.second").addClass("class"+uniqueId);
//Get result number because it will not be his name anymore
result = $("input.third").val();
//Switch clases
SwitchClases(_this);
transAct = true;
// Her we actualy insert the new line
$("<div class='first'>9 x 8 = <input class='first' type='text' disabled='true' maxlength='2'/></div>").css("opacity", "0").hide().prependTo(_this).slideDown().animate({opacity: 0.1},function(){
transAct = false;
})
$("div.third").append(" "+result) // Write down inputed result
$("input.third").fadeOut().remove() // Drop input box into black hole
$("div.fifth").fadeOut().remove(); // Do same thing to last division
// Check if answer was correct!
// Here are two examples with whom you can play as much as you like
//$(".leftSide div.class"+(uniqueId-1)).stop().animate({backgroundColor: '#00DD00'},100).animate({backgroundColor: 'white'},900);
// $(".leftSide").stop().animate({backgroundColor: '#DD0000'},100).animate({backgroundColor: 'white'},900);
//Now set focus to next input area , so we can continue and be lazy by not clicking on new input box!
$('.newEleCont input.second').focus();
}
}
}
// Restrict inputing any other character besides a number
else {
// Ensure that it is a number and stop the keypress
if ((keyPresed < 48 || keyPresed > 57) && (keyPresed < 96 || keyPresed > 105 )) {
e.preventDefault();
}
}
});
});( 1)如何才能找到双动画的解决方案？
2)如何改进这段代码？(也就是说，使用更少的jquery)
编辑:如您所见，我向每个新div.third添加了额外的uniqueID类。我想要做的是只在给定的backgroundColor上播放uniqueID动画，而不是与基本的third>fourth>fifth类动画交互，就像它们做了自己的事情一样！
回答 2
Stack Overflow用户
发布于 2011-12-18 21:36:47
jQuery中的并行动画:您可以通过将属性对象传递给动画函数来执行并行动画。例如：
var animateProperties = {
top:50px,
left:100px,
width:300px,
}
object.animate(animateProperties);您可以使用停止功能来停止正在进行的动画。我已经修改了你的代码，下面给出了调用动画函数的代码。
var style = {
"opacity": opacity,
"font-size": fontSize + "px"
}
if(animate){
if(index == config.activeIndex + 1){
style.backgroundColor = '#00EE00';
$(row).stop(true, true).animate(style, 100)
.animate({backgroundColor: 'white'}, 1200);
}else{
$(row).stop(true, true).animate(style, 100);
}
}else{
$(row).css(style);
}您可以在这里找到代码的最终版本，http://jsfiddle.net/diode/rBqVE/6/。
我使用config对象实现了这个可配置。您可以在代码中找到它，但是要获得最好的结果，您还必须修改css。
Stack Overflow用户
发布于 2011-12-19 03:13:03
请参阅函数dequeue http://api.jquery.com/jQuery.dequeue/
jQuery将每个动画调用添加到一个队列中。使用dequeue，您可以在队列中调用下一个动画调用。
在这里，排队列演示您可以看到一个简单的演示。也见jQuery效应http://jqueryui.com/demos/effect/。这不是为了这个目的，但可能是有用的。
https://stackoverflow.com/questions/8553825
复制相似问题
腾讯云开发者
