jquery lavalamp風格在codepen工作，但不是在jsfiddle

我想在jquery中製作一個熔岩燈風格。它在codepen中工作，但不在jsfiddle或我自己的網頁中。任何人都可以幫我弄清楚問題是什麼？jquery lavalamp風格在codepen工作，但不是在jsfiddle

jQuery代碼

// adds sliding underline HTML 
jQuery('#menu').append('<li class="slide-line"></li>'); 

// animate slide-line on click 
jQuery(document).on('click', '#menu li a', function() { 

     var $this = jQuery(this), 
      offset = $this.offset(), 
      //find the offset of the wrapping div 
      offsetBody = jQuery('#box').offset(); 

     // GSAP animate to clicked menu item 
     TweenMax.to(jQuery('#menu .slide-line'), 0.45, { 
      css:{ 
      width: $this.outerWidth()+'px', 
      left: (offset.left-offsetBody.left)+'px', 
      top: (offset.top-offsetBody.top+$(this).height())+'px' 
      }, 
      ease:Power2.easeInOut 
     }); 

     return false; 
}); 

jQuery('#menu > li a').first().trigger("click");

工作演示codepen
Codepen demo

不工作演示的jsfiddle /正常的網頁
JSFiddle demo

來源

2014-10-03 Kevin Ammerlaan

它說在控制檯TweekMax沒有定義。這是從哪裏來的？ – 2014-10-03 10:46:53

我真的不知道我從這個原始codepen代碼http://codepen.io/jonathan/pen/wBDHA但是我無法找到任何關於TweekMax在這個代碼？我不是一個專業的jQuery用戶，所以我不理解代碼的任何內容，除非它在我的網頁上工作，當它在codepen中工作時 – 2014-10-03 11:06:07

你缺少這個庫

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

只需將它添加到您的HTML的頭部分。

來源

2014-10-03 11:17:30

jquery lavalamp風格在codepen工作，但不是在jsfiddle

回答

相關問題