javascript - 悬停时 jQuery 或 CSS 更改和淡化背景位置

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 属性设置动画。

$('.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",
  });
});

.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;
}

<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>