0

我正在尝试在 jquery 中制作熔岩灯样式。它在 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 演示

不工作演示 jsfiddle / 普通网页
JSFiddle 演示

4

1 回答 1

1

你错过了这个图书馆

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

只需将其添加到您的 html 的 head 部分。

于 2014-10-03T11:17:30.127 回答