jQuery執行順序 - 動畫前附加信息

我在jQuery中有一個好奇的問題，關於執行順序。下面的代碼基本上按照設計工作，但在動畫和溢出保護移除之後，最後附加的closeButton div出現在動畫之前。jQuery執行順序 - 動畫前附加信息

是什麼導致了這種行爲，以及處理它的最佳方式是什麼？

 $('.infoRight .hoverIcon').click(
      function(){ 
       $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off 
       $(this).parent() 
        .clone(false)//create a copy of the item 
        .addClass('expandinator')//give appropriate classes to ensure appropriate styling 
        .addClass('expandinatorright') 
        .appendTo($(this).parent());//place clone in its parent. 
       $('.expandinatorright').animate({//change to colour for expanded info 
        backgroundColor: "#FFFFFF", 
        color: "#124191" 
       }, 300 , function() { 
        $('.expandinatorright').animate({//biggify 
         width: "510px" 
        }, 150, function() { 
         $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection 
         $('<div class="closeButton"></div>').appendTo('.expandinatorright');//add a close button 
        }); 
       }); 
      } 
     );

來源

2011-11-24 Hal Clive

你必須張貼在jsfiddle.net你的工作的一個例子。我沒有得到太多，但是，你正在使用動畫回調函數。動畫完成後會被觸發。這是設計嗎？ – OptimusCrime

絕對 - 我想要的是closeButton類的div只在所有動畫和東西都完成後才放置，但問題是它看起來並沒有在回調中執行，而是在動畫甚至發生之前。我會看看我是否可以在jsfiddle上獲得它，但是剝離所有不相關/公開可見的東西將是相當多的工作。 –

你可以在這裏做什麼是添加display:none屬性到類「closeButton」。一旦你完成了動畫的東西就像$（「。closeButton」）。show（）; 逸岸你甚至可以鏈中的Show（）函數與你正在做什麼，是這樣的： -

$('.infoRight .hoverIcon').click(
      function(){ 
       $(this).hide();//hide hover icon. Needed as it would otherwise remain visible until mouse-off 
       $(this).parent() 
        .clone(false)//create a copy of the item 
        .addClass('expandinator')//give appropriate classes to ensure appropriate styling 
        .addClass('expandinatorright') 
        .appendTo($(this).parent());//place clone in its parent. 
       $('.expandinatorright').animate({//change to colour for expanded info 
        backgroundColor: "#FFFFFF", 
        color: "#124191" 
       }, 300 , function() { 
        $('.expandinatorright').animate({//biggify 
         width: "510px" 
        }, 150, function() { 
         $('.expandinatorright').css('overflow', 'visible', function() {});//remove overflow protection 
         $('<div class="closeButton"></div>').appendTo('.expandinatorright').show();//add a close button 
        }); 
       }); 
      } 
     );

來源

2011-11-24 13:35:23 pranky64

它的工作原理！爲什麼div在執行代碼之前似乎被追加了？謝謝，順便說一下:) –

我不太清楚爲什麼會發生這種情況，你也可以在$（'。expandinatorright'）中嘗試類似這樣的動畫回調函數： - '$（'。expandinatorright'）。 css（'overflow'，'visible'，function（）{}）。append（'

'）'我猜如果你試試這個，你不需要把這個display：none屬性 – pranky64

jQuery執行順序 - 動畫前附加信息

回答

相關問題