如何從不透明狀態暫停和恢復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（）？

回答

相關問題