相对于其父级动画属性

Question

我正在寻找相对于其高度移动 'thumbnail' 内的文本的方法，该高度根据媒体宽度而变化。对于 TweenMax，似乎除了数字和一些符号外，我无法在引号内放置任何其他内容。是否可以使用 GSAP 或简单地 jQuery?

HTML如下：

<div class=' blog col-sm-4 col-xs-12'>
  <div class='thumbnail '>
     <img src='https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xfa1/t31.0-8/10285836_982461275099969_2229614909304204709_o.jpg' />
     <h2>寫字</h2>
     <p></p>
   </div>
</div>
<--! the other two similar div !-->

这里有 TweenMax，认为它可能是计算“.thumbnail”高度的一种方法，但无论如何都不起作用：

var height = $('.thumbnail').height()/1.5;
$(".thumbnail").hover(function(){  
  $(this).children('img').toggleClass('thumbnail-img-hover');
  TweenMax.to($(this).children('h2'), 1.5,{y:'-=height'});
});

Answer 1

因为 height 是包含 value 的变量，所以你不应该将它包装在 ' ' 中。下面的更改将得到你需要的..

TweenMax.to($(this).children('h2'), 1.5,{y:'-='+height});

相对于其父级动画属性

to animate properties relative to their parent

jquery

gsap