0

fadeIn再帰的showまたは関数を正しく機能させようとしてtoggleいますが、エラーがどこにあるのかわかりません。

HTML：

<table id="myTable"></table>​

JavaScript：

$(function () {
    var showMenu = function (i, callback) {
            if (i > 10) {
                //stop
                return;
            } else {
                $('#myTable').append('<tr id="method_1' + i + '" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_' + i + '" id="id_1_' + i + '">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');
                $('#method_1' + i).fadeIn('1000', showMenu(i + 1, showMenu));
            }
        }
    showMenu(2, showMenu);
})

問題は、エフェクトがコールバックで呼び出されていないことですが、代わりに一度に呼び出されます。

問題

4

4 に答える 4

4

あなたのfadeInコールバックでは、関数呼び出しではなく関数を提供する必要があります(あなたがしていること)。私は提案します：

$('#method_1'+i).fadeIn('1000', function () {
    showMenu(i+1,showMenu);
});

そうするべきだと思います...

これが私の変更を示すjsFiddleです：http://jsfiddle.net/mAETY/1/

于 2012-06-29T19:37:52.607 に答える
2

これは、 へのコールバックを提供せず、すぐに ( の前に) 再度fadeIn呼び出すためです。showMenu.fadeIn()

その場で関数を呼び出すのではなく、実際に呼び出す関数を提供することで、これを修正します。

 $('#method_1'+i).fadeIn('1000',function() { showMenu(i+1,showMenu) });

実際に見てください。

于 2012-06-29T19:38:23.320 に答える
1

試す：

$(function(){

    var menu = (function(i){
         var $this =  {
             show: function(){
                  if(i++ > 10) return;
 $('#myTable').append('<tr id="method_1'+i+'" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');


                  $('#method_1'+i).fadeIn('1000',$this.show); 

             }
         }
             return $this;
    });

    menu(0).show();

});​
于 2012-06-29T19:40:53.320 に答える
1

または、テーブル行から ID とスタイルを削除し、テーブル行をダイブにカプセル化してから、ID とスタイルを追加することもできます。それが動作します。

$(function(){

    var showMenu = function (i,callback){

      if (i>10){
        //stop
         return;
      }else{
         $('#myTable').append('
         <div id="method_1'+i+'" style="display: none;">
         <tr><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>
         </div>');

          $('#method_1'+i).fadeIn('1000', function () {     showMenu(i+1,showMenu); });               
      }
    }

    showMenu(2,showMenu);                                                           

})

編集

http://jsfiddle.net/weightlossexp/V3gDE/

于 2012-06-29T19:46:51.380 に答える