元素上的 GSAP 时间线答案

【问题标题】：GSAP timeline over element元素上的 GSAP 时间线
【发布时间】：2016-11-21 13:50:23
【问题描述】：

我尝试在它悬停时触发时间线，所以我用我的时间线创建一个 var，并用 event.delegateTarget 来查找孩子，而不是全部用 .CLASS

这是我的代码

$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
        tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
        .to(".line-top", 2, {width: '100%', ease: Power4.easeOut}, "-=1");

});

我在控制台中没有看到任何错误，但是这个：o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} 不会触发....

谁能帮帮我？

提前谢谢

【问题讨论】：

标签： javascript jquery gsap

【解决方案1】：

假设 delegateTarget 方法有效，根据 jQuery 的文档，这似乎很好，这里唯一的问题是补间的第二行没有补间元素。您需要向它传递一个，类似于以下内容：

$(".gb-help-list ").on('mouseover', 'li', function (e) {
console.log('mouse');
var tl = new TimelineLite();
        tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
        .to($(event.delegateTarget).find('.line-top'), 2, {width: '100%', ease: Power4.easeOut}, "-=1");
});

【讨论】：