Question

我正在尝试从暂停的不透明度恢复fadeIn（）。我有两个拖车。如果一个被丢弃（我称之为draggable_purple），紫色div开始淡入。仅限于特定的不透明度。当达到不透明度时，会出现另一个div（浅蓝色），并显示一条消息，表示黄色可拖动。在黄色拖动器掉落后，我希望紫色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>

Answer 1

良好的稳定暂停/简历令人惊讶地棘手但是 - 好消息 - 有一个jQuery plugin 来帮助你。

Answer 2

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

Answer 3

改变这个：

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

如何暂停和恢复不透明度的fadeIn（）？

3 个答案: