0

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

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

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

3 回答 3

1

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

于 2012-11-29T12:01:48.580 回答
1

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

于 2012-11-29T12:01:51.107 回答
1

改变这个：

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

对此：

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

这是更新的小提琴

另一件事，这一行：

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

是没有意义的。你有id，它是独一无二的，不需要parentand find：

$('#purple').fadeTo(1500, 0.5, onhold);
于 2012-11-29T12:01:58.100 回答