Question

我已经尝试了一些东西但是现在在这一点上，我希望淡出改变背景位置和淡化而不工作....任何想法？还是一个更好的解决方案？

  $('.collection-hover a').on("mouseenter touchstart", function(event) {
    $(this).find('.collection-list-hover-desc').fadeIn(1000);
    $(this).animate({backgroundPosition: "-50% 100%"}); 
  });
  $('.collection-hover a').on("mouseleave touchend", function(event) {
    $(this).find('.collection-list-hover-desc').fadeOut(1000);
    $(this).animate({backgroundPosition: "0 0"}); 
  });

html片段

<li class="collection-list-item grid-item first collection-hover">
   <a href="/collections/butterfly-sofa" class="position-left" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1491014401" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1491014401&quot;); height: 108.009px;">
  <div class="collection-list-hover-desc">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button">
    <span class="button" style="
    padding: 5px 8px;
">Entdecken</span>
  </div>
</a>
</li>

Answer 1

您希望单独为background-position-x和background-position-y属性制作动画。

＆＃13;

$('.collection-hover a').on("mouseenter touchstart", function(event) {
  $(this).find('.collection-list-hover-desc').fadeIn(1000);
  $(this).animate({
    'background-position-x': "-50%",
    'background-position-y': '100%'
  });
});
$('.collection-hover a').on("mouseleave touchend", function(event) {
  $(this).find('.collection-list-hover-desc').fadeOut(1000);
  $(this).animate({
    'background-position-x': "0",
    'background-position-y': "0",
  });
});

＆＃13;

.collection-hover a {
  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') 0 0 no-repeat;
  width: 100vw;
  height: 100vh;
  display: block;
}
.collection-list-hover-desc {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="collection-list-item grid-item first collection-hover">
  <a href="/collections/butterfly-sofa">
    <div class="collection-list-hover-desc">
    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  </a>
</li>

＆＃13;

Answer 2

这个CSS应该指向正确的方向：

https://jsfiddle.net/mikatalk/7aLuk4yL/

a {
// your css ...
  position: relative; 
  &:after {
    content: " ";
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    background: pink;
    transition: all ease 300ms;
    z-index: -1;
  }
  &:hover {
    &:after {
      transition: color ease 700ms;
      background: red;
      transition: top ease 300ms;
      top: 50%;
    }
  }
}

Answer 3

在页面上移动元素以及使用jQuery更改不透明度的一种超级简单方法是使用GreenSock动画。

https://greensock.com/

他们有许多免费版本，只需几行就可以满足您的要求。如下所示：

<head>
//Calls to the Greensock CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

<script>
   $('#your-element').hover(function() {

      TweenMax.to($('.your-element-to-change'), 1, {alpha: 0.5, left: 100, top: 100});
     })
</script>
</head>

该代码会将元素设置为100px，下降100px，并在1秒内将不透明度更改为0.5。所有这些都可以改变以满足您的需求。

jQuery或CSS在悬停时改变和淡化背景位置

3 个答案: