Question

我目前正在使用bootstrap col-md-4和col-xs-12来使我的小网页动态显示不同的窗口宽度，如下面的html：

<div class='features'>
  <div class=' blog col-sm-4 col-xs-12'>
    <div class='thumbnail '>
       <img <--!content inside--!>/>
       <h2><--!content inside--!></h2>
       <p><--!content inside--!></p>
    </div>
  </div>
</div>
<--!three of them in total--!>

为了让它有点花哨，我尝试添加一些tweenmax，首先显示<img>和<h2>并使<img>消失，<p>出现在我的鼠标中输入。问题是，只要三个.thumbnail进入一个区块（即窗口宽度大于768px），文本就会长于其父级框架。

为了弥补这一点，我给了它一些条件来改变.thumbnail的高度，但是没有一个能够真正使高度相应地改变窗口大小。

这里是javascript部分：

//thumbnail//
var height = $('.thumbnail').height()/1.5;
var textheight =($('.thumbnail p').height()+$('.thumbnail h2').height())*2;
var imgheight = $('.thumbnail img').height();

$(".thumbnail").mouseenter(function(){

if(imgheight<textheight){
   height = textheight*1.5;
} else {height = $('.thumbnail').height()/1.5;}

TweenMax.fromTo(this, 0.6,{y:0}, {y:'-=20px', ease: Power4.easeInOut, repeat:1, yoyo:true} );  
$(this).addClass('active-thumbnail-hover').fadeIn(600);

if($('.thumbnail').height()<textheight){
  TweenMax.to($(this), 0.6, {height:textheight});
} else {height = $('.thumbnail img').height()/1.6;}

TweenMax.to($(this).children('h2'), 0.8,{y:-height, ease:Power1.easeInOut,color:'black', background:'none'});

TweenMax.fromTo($(this).children('img'), 0.8, {opacity:1}, {opacity:0, ease: Power1.easeIn});

TweenMax.fromTo($(this).children('p'),0.8,{display:'none'},{display:'block',ease:Power1.easeIn});
});

$(".thumbnail").mouseleave(function(){
 if(imgheight<textheight){
   height = $('.thumbnail').height()*2.5;
   TweenMax.to($(this), 0.6, {height:$('.thumbnail').children('img').height()*1.05});
 } else {height = $('.thumbnail img').height()/1.6;}

TweenMax.to($(this).children('h2'), 0.8,{y:0, ease:Power1.easeInOut, background:'rgba(215,255,210, 0.5)'});

TweenMax.fromTo($(this).children('p'),0.3,{display:'block'}, {display:'none',ease:Power1.easeIn});


TweenMax.fromTo($(this).children('img'), 0.8, {opacity:0}, {opacity:1, ease: Power1.easeIn});

});

here我的JSBin有多喜欢，对不起它有点乱！

使用引导媒体查询时使用gsap动态动画

0 个答案: