0

一時停止した不透明度からfadeIn（）を再開しようとしています。ドラッグ可能なものが2つあります。1つをドロップすると（私はそれを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>
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、それはユニークです、必要はありませんparentそしてfind：

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