0

jqueryの結果が表示されているdiv wrapper_があります

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>


<div id='wrapper_' style='display: none;'>  
</div>

jqueryで

 $(document).ready(function () {
     $('#other_stuff').click(function () {
         //show image
         jQuery('#ico_wait').fadeToggle();
         //DO STUFF
         jQuery('#ico_wait').hide();
         //ADD INFO GOTTEN IN WRAPPER
         jQuery('#wrapper_').show();
         jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
     });
 })

追加方法 

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>

wrapper_ 内? それはdivに含まれていますか？つまり、すべてのdivではなくコードを実行するときに画像のみを表示したいのですが、結果の取得が完了したら、画像を非表示にしてdiv全体を表示しますか?

4

2 に答える 2

1

私があなたのことを正しく理解している場合、あなたは次のことを行う必要があります。

<div id='wrapper_' style='display: none;'>  
    <div id='ico_wait' class="ico_wait" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

JS:

$(document).ready(function () {
    $('#other_stuff').click(function () {
        //show image when stuff inside wrapper is being populated
        $('#wrapper_').show();
        //DO STUFF
        //ADD INFO IN WRAPPER when its ready and hide image
        $('#wrapper_ #ico_wait').fadeToggle();
        $('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
    });
});
于 2013-03-29T17:55:36.363 に答える
0

私はこれについて最善の方法だと思います：

CSS

.hide {
    display: none;
}

HTML

<div id='wrapper_'> 
    <div id='ico_wait' class="ico_wait" class="hide" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#ico_wait').removeClass('hide'); // Use of CSS Styles to do any animation for fading
             //DO STUFF
             jQuery('#ico_wait').addClass('hide');     
             //ADD INFO GOTTEN IN WRAPPER
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

CSS エンジンにスタイルの更新や HTML への変更を行わせることを好みます。これは、同じ JavaScript 実行スレッドではなく、別のスレッドで実行する必要があるため、JavaScript の実行中にアニメーションを問題なく実行できます。

jQueryだけでもコンテンツスワッピングでこれを行うこともできますが、それがどの程度推奨されるかはわかりません.

jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#wrapper_').html("<img src='img/ico_wait.gif' />");
             //DO STUFF
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

長時間実行されるコードで非同期の問題が発生している場合は、次のようなものを使用できます: jQuery Async to help at http://mess.genezys.net/jquery/jquery.async.php

お役に立てれば。

于 2013-03-29T18:17:27.190 に答える