如何使用jQuery的.live（）在加載後爲頁面設置動畫效果

Question

$(selector).live(events, data, handler); 

如何讓它在頁面加載後執行動畫？目前是

$('a[data-reveal-id]').live('click',function(e) { 

但我希望它做頁面加載後的動畫，而不點擊任何東西。

我試圖改變'點擊'到'加載'，但看起來不工作。

$('a[data-reveal-id]').live('load',function(e) { 

原始代碼：

(function($) { 

/--------------------------- 監聽數據-reveal-ID屬性 ----------------------------/

$('a[data-reveal-id]').live('click',function(e) { 
    e.preventDefault(); 
    var modalLocation = $(this).attr('data-reveal-id'); 
    $('#'+modalLocation).reveal($(this).data()); 
}); 

/----- ---------------------- 延伸並執行 ----------------------------/

$.fn.reveal = function(options) { 


    var defaults = { 
     animation: 'fadeAndPop', //fade, fadeAndPop, none 
     animationspeed: 300, //how fast animtions are 
     closeonbackgroundclick: true, //if you click background will modal close? 
     dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal 
    }; 

    //Extend dem' options 
    var options = $.extend({}, defaults, options); 

    return this.each(function() { 

/---------- ----------------- 全局變量 ----------------------------/

 var modal = $(this), 
      topMeasure = parseInt(modal.css('top')), 
      topOffset = modal.height() + topMeasure, 
      locked = false, 
      modalBG = $('.reveal-modal-bg'); 

/--------------------------- 創建模態BG -------- --------------------/

 if(modalBG.length == 0) { 
      modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal); 
     }   

/--------------------------- 打開&關閉動畫 ---------- ------------------/

 //Entrance Animations 
     modal.bind('reveal:open', function() { 
      modalBG.unbind('click.modalEvent'); 
      $('.' + options.dismissmodalclass).unbind('click.modalEvent'); 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "top": $(document).scrollTop()+topMeasure + 'px', 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "fade") { 
        modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure}); 
        modalBG.css({"display":"block"}); 
        unlockModal()    
       } 
      } 
      modal.unbind('reveal:open'); 
     }); 

     //Closing Animation 
     modal.bind('reveal:close', function() { 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "top": $(document).scrollTop()-topOffset + 'px', 
         "opacity" : 0 
        }, options.animationspeed/2, function() { 
         modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "fade") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "opacity" : 0 
        }, options.animationspeed, function() { 
         modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'hidden', 'top' : topMeasure}); 
        modalBG.css({'display' : 'none'}); 
       }  
      } 
      modal.unbind('reveal:close'); 
     });  

/--------------------- ------ 打開和關閉添加監聽 ----------------------------/

 //Open Modal Immediately 
    modal.trigger('reveal:open') 

     //Close Modal Listeners 
     var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() { 
      modal.trigger('reveal:close') 
     }); 

     if(options.closeonbackgroundclick) { 
      modalBG.css({"cursor":"pointer"}) 
      modalBG.bind('click.modalEvent', function() { 
       modal.trigger('reveal:close') 
      }); 
     } 
     $('body').keyup(function(e) { 
      if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key 
     }); 

/--------------------------- Animations Locks ---------------- ------------/

 function unlockModal() { 
      locked = false; 
     } 
     function lockModal() { 
      locked = true; 
     } 

    });//each call 
}//orbit plugin call 
})(jQuery); 

HTML：

<a href="#" data-reveal-id="myModal" id="first_load"></a> 

    <div id="myModal" class="reveal-modal reveal-modal-1"> 
     <a class="close-reveal-modal hvr-push"></a> 
     <div id="dotype"> 
      <div class="type-wrap"> 
       <div id="typed-strings"> 
       <p>Hey there, I lost my ingredients<br> yesterday at the city. I was going <br> to make you a birthday cake.<br> Can you help me to find it?</p> 
       </div> 
      <span id="typed"></span> 
      </div> 
     </div> 
    </div> 

Answer 1

你不應該使用live，因爲它已經過時了。爲了使事件發生時，該文件已加載，你可以使用下列事件：

$(document).ready(function() { 

}); 

完整的示例：

$(document).ready(function() { 
 
    $("div").animate({top: "200px"}, 4000); 
 
});

div { 
 
    border: 1pt solid blue; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 

 
<div> 
 
    Animate on load example 
 
</div>

Answer 2

就試試這個：

$(window).load(function() { 
    // your code 
}); 

Answer 3

好吧，我加入這個

$(document).ready(function(){ 
    $('a[data-reveal-id]').delay(500).trigger('click'); 
}); 

在

$('a[data-reveal-id]').live('click',function(e) { 
    e.preventDefault(); 
    var modalLocation = $(this).attr('data-reveal-id'); 
    $('#'+modalLocation).reveal($(this).data()); 
}); 

謝謝。我解決了我自己的問題。

我也這樣做的延遲。

$(document).ready(function(){ 
    setTimeout(function(){ 
     $('a[data-reveal-id]').delay(500).trigger('click'); 
    }, 800); 
});