jquery lavalamp 스타일은 코드 픈에서 작동하지만 jsfiddle에서는 작동하지 않습니다.

jquery에서 용암 램프 스타일을 만들려고합니다. 그것은 codepen에서 작동하지만 jsfiddle 또는 내 자신의 웹 페이지에서 작동하지 않습니다. 문제가 무엇인지 알아낼 수 있습니까?jquery lavalamp 스타일은 코드 픈에서 작동하지만 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");

근무 데모는 데모 jsfiddle/일반 웹 페이지
JSFiddle demo

출처

2014-10-03 Kevin Ammerlaan

콘솔에서 TweekMax가 정의되지 않았다고 말합니다. 그게 어디서 온거야? –

정말이 코드를 가지고 있지 않다. http://codepen.io/jonathan/pen/wBDHA이 코드에서 TweekMax에 관해서는 아무것도 찾을 수 없다. 나는 직업적인 jQuery 사용자가 아니기 때문에 코드의 내용을 이해하지 못한다. 코드 페이지에서 작동 할 때 내 웹 페이지에서 작업하지 않는 것이다. –

당신은이 라이브러리

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

누락 작업 Codepen demo

하지
을 codepen

html의 head 섹션에 추가하기 만하면됩니다.

출처

2014-10-03 11:17:30

jquery lavalamp 스타일은 코드 픈에서 작동하지만 jsfiddle에서는 작동하지 않습니다.

답변

관련 문제