如何从不透明状态暂停和恢复fadeIn（）？

我试图从暂停的不透明度恢复fadeIn（）。我有两个可拖动的。如果一个被放弃（我称之为draggable_purple），一个紫色的div开始淡入。只有特定的不透明度。当不透明度到达时，另一个div出现（浅蓝色）并显示一条消息，放弃黄色可拖动。在黄色拖拽放下之后，我想让紫色div进行淡入淡出。如何从不透明状态暂停和恢复fadeIn（）？

这可能听起来有点牵强，对于我的代码，我试图将其缩小到唯一重要的元素。

在JsFiddle中，您会找到我的解决方案，但它不起作用。我对你的问题是;你将如何解决这个问题，为什么不是我自己的解决方案。提前感谢您的时间。

JsFiddle

jQuery的

$("#draggable_purple").draggable({ 
    revert: true 
}); 


$("#draggable_yellow").draggable({ 
    revert: true 
}); 

$("#orange").droppable({ 
    drop: function(event, ui) { 
     if (ui.draggable.is('#draggable_purple')) { 
      $(this).parent().find('#purple').fadeTo(1500, 0.5, onhold); 

      $(this).droppable('destroy'); 
     } 
    } 
}); 


function onhold() { 
    $(this).parent().find('#lightblue').show(); 
} 

$('#lightblue').droppable({ 
    accept: '#draggable_yellow', 
    drop: function(event, ui) { 
     $(this).hide('fast'); $('#purple').css('opacity', 0.5).fadeIn(1500, 1.5); 
    } 
});

HTML

<div id="orange"> 
     <div id="purple"> 
      </div> 
     <div id="lightblue"> Drop the yellow div, 
      to continue the fadeIn 
      </div> 
      </div> 

<div id="draggable_purple"> start purple fadeIn 
      </div> 
<div id="draggable_yellow"> resume fadeIn 
      </div>

来源

2012-11-29 Opoe

对不起，你刚才说有一个的jsfiddle去与此。 – Bruno

@布鲁诺我很抱歉，现在已经开始 – Opoe

更改此：

$('#purple').css('opacity', 0.5).fadeIn(1500, 1.5);

要这样：

$('#purple').fadeTo(1500, 1);

Here's the updated fiddle

另一件事，这条线：

$(this).parent().find('#purple').fadeTo(1500, 0.5, onhold);

是pointl ESS。你有id，这是独特，没有必要为parent和find：

$('#purple').fadeTo(1500, 0.5, onhold);

来源

2012-11-29 12:01:58 Aesthete

你对代码是正确的，我缩小了它的范围，有些行可能仍然很难找到。 – Opoe

良好的固体暂停/恢复是令人惊讶的棘手，但 - 好消息 - 有一个jQuery plugin到h elp你。

来源

2012-11-29 12:01:48

你在黄色的方法，而不是使用.fadeTo.fadeIn（我不知道为什么你1.5要么..我想1会做）。

来源

2012-11-29 12:01:51

如何从不透明状态暂停和恢复fadeIn（）？

回答

相关问题