如何从不透明度暂停和恢复淡入淡出（）？答案

【问题标题】：How to pause and resume fadeIn() from opacity?如何从不透明度暂停和恢复淡入淡出（）？
【发布时间】：2012-11-17 11:44:53
【问题描述】：

我正在尝试从它暂停的不透明度中恢复fadeIn()。我有两个可拖动的。如果一个被丢弃（我称之为draggable_purple），一个紫色的div开始淡入。只有特定的不透明度。达到不透明度后，会出现另一个 div（浅蓝色），并带有一条消息以删除黄色可拖动对象。 Yellow-draggable 被删除后，我希望紫色 div 继续淡入。

这听起来有点牵强，请原谅我的代码，我试图将它缩小到在这种情况下唯一重要的元素。

在 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>

【问题讨论】：

对不起，你说有一个 jsFiddle 来配合这个。
@Bruno 很抱歉，现在已经结束了

标签： javascript jquery opacity fadein resume

【解决方案1】：

改变这个：

$('#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);

毫无意义。你有id，它是独一无二的，不需要parent 和find：

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

【讨论】：

你说得对，我把它缩小了，有些行可能还很遥远。

【解决方案2】：

良好的稳定暂停/恢复非常棘手，但 - 好消息 - 有一个 jQuery plugin 可以帮助您。

【讨论】：

【解决方案3】：

您在黄色方法中使用.fadeIn 而不是.fadeTo（我不确定您为什么也有1.5 .. 我认为1 会这样做）。

【讨论】：