jQuery悬停功能不适用于光滑的调整大小

时间:2019-08-08 08:35:19

标签: jquery slick.js gsap

当滑块更改断点时,我遇到了一个奇怪的错误。

如果在滑块加载时看到我的小提琴,则jQuery悬停功能正常。但是,当滑块更改断点时,悬停停止工作。 有谁知道这个奇怪的错误发生了什么?

https://jsfiddle.net/igor1/8jhvkrsw/

<script>
$('.lazy,.lazy-not-css').lazy({
  effect: "fadeIn",
  effectTime: 1000,
  threshold: 0,
  delay: 0
});

$('.slider-2').not('.slick-initialized').slick({
  dots: false,
  infinite: false,
  arrows: false,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 1025,
    settings: {
      slidesToShow: 3
    }
  },{
    breakpoint: 991,
    settings: {
      slidesToShow: 2.5
    }
  },{
    breakpoint: 600,
    settings: {
      slidesToShow: 2
    }
  },{
    breakpoint: 480,
    settings: {
      slidesToShow: 1.2
    }   
  }]
});



var $trigger = $('.explore-hover');
$trigger.each(function(index, element) {
  var bOverlay = $(this).find('.overlay-blue');
  var bButton = $(this).find('.explore-button');
  var container = $(this).find('.explore-open');
  var bText = $(this).find('.explore-open h5,.explore-open p');
  var bLink = $(this).find('.explore-open a');
  var exploreAn = new TimelineLite({paused:true, reversed:true}); 

  exploreAn.to(bOverlay, 0.3, {opacity:0, ease: Power2.easeInOut})
    .to(bButton, 0.3, {scale:0, ease: Power2.easeInOut},0)
    .fromTo(container, 0.6, {scale:0,x:"-50%",y:"-50%", ease: Power2.easeInOut},{scale:1,x:"-50%",y:"-50%", ease: Power2.easeInOut})
    .staggerFrom(bText, 0.4, {opacity:0, y:50, ease:Back.easeOut}, 0.2)
    .from(bLink, 0.0001, {opacity:0, ease:Back.easeInOut});

  element.animation = exploreAn;
});

$trigger.hover(over,out);
function over(){ 
  this.animation.play();
}
function out(){ 
  this.animation.reverse()
}</script>

0 个答案:

没有答案