jQuery .fadeOut .clickが動作しないコールバック

Question

私は画像アップローダアプリケーションを開発していますが、Chromeでのみ発生する1つのバグを除いてすべてがうまくいきます。私はこの問題を1つのコールバックに取り除いてしまいました。

.click（）トリガーへの.fadeOutコールバックがトリガーされないという問題があります。私は下にリンクされている簡単なバージョンのフィドルを作り直しました。最初のクリックはfadeOutを開始し、fadeOutが終了すると.clickトリガーは発生しません。もう一度クリックするトリガーがトリガーされます。なぜどんなアイデア？

HTML：

<div><input type="file" name="image_file" id="image_file"/></div> 

<div class="overlay_wrap"> 
    Overlast 
</div> 

<a id="click" href="">Click</a> 

のjQuery：

$(document).ready(function() { 
    $("#click").click(function(event) { 
     event.preventDefault(); 
     $('.overlay_wrap').fadeOut(1000, function(event){ 
      $('#image_file').trigger('click'); 
     }); 
    }); 
}); 

http://jsfiddle.net/gg2a7/5/

助けてくれてありがとう！

EDIT：古いフィドルリンクが変更されていました。

Answer 1

に変更

、これは動作しません。それは、ブラウザ内のタイミング/スレッド機能と関係しています。 <input type="file" />は（それについてGoogleでLoads ofquestions on SO /原料）プログラムで開くことができませんができます。

問題の核心はこれです。 Chromeだけでなく、 Firefoxはポップアップがブロックされたことを示すメッセージを表示し、Safariもそれをブロックし、IEではフォームは送信されません。

これは、潜在的なセキュリティ上のリスクがあるためです。 ユーザアクションのみが開封されます。<input type="file" />。 .fadeOut()のため、ブラウザはこれをユーザーイベントとしてこれ以上認識しません。今度は、がになっているので、ブラウザのタイミング/スレッディングに戻ります。デリゲートも、ダイアログが開かないような何らかの種類のスレッド/タイムアウトもありません。

$("#click").click(function(event) { 
    event.preventDefault(); 
    $('#image_file').trigger('click'); 
}); 

JSFiddle。

HTML

<input type="button" name="image_file" id="image_file" value="type='button'" /> 

JS

$("#click").click(function(event) { 
     event.preventDefault(); 
     $('.overlay_wrap').fadeOut(1000, function(){ 
      $('#image_file').trigger('click'); 
     }); 
    }); 

    $('#image_file').click(function() { 
     alert('ok'); 
    }); 

0123：それは実際に<input type="file" />であることを示すために

は、ここは作業を行うこと<input type="button" />との例です。

長いストーリー：フェード効果ではできません。単にダイアログを開いて要素を非表示にすることもできますが、それだけです。

$("#click").click(function(event) { 
    event.preventDefault(); 
    $('.overlay_wrap').hide(); 
    $('#image_file').trigger('click'); 
}); 

JSFiddle。

Answer 2

があなたの $('.overlay_wrap').fadeOut(1000,complete)悲しいこと

$('.overlay_wrap').fadeOut(1000); 
complete();