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

【问题标题】：jQuery or CSS changing and fading background-position on hoverjQuery或CSS在悬停时改变和淡化背景位置
【发布时间】：2017-08-26 10:03:11
【问题描述】：

我已经尝试了一些东西，但现在，我想淡出改变背景位置和淡入但不工作....有什么想法吗？还是更好的解决方案？

  $('.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的sn-p

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

【问题讨论】：

你的html在哪里？
能否提供一些html代码，如果您可以通过单击将html、css和jQuery包含在一个html模块中，这样其他s可以更容易地提供帮助
添加了 html 的 sn-p
这可能会有所帮助。 stackoverflow.com/questions/7622822/make-background-fade-out-in>

标签： javascript jquery html css

【解决方案1】：

在页面上移动元素以及使用 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>

该代码将动画您的元素向左 100 像素，向下 100 像素，并在 1 秒内将不透明度更改为 0.5。所有这些您都可以更改以满足您的需求。

【讨论】：

【解决方案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%;
    }
  }
}

【讨论】：

【解决方案3】：

您想分别为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>

【讨论】：

你到底想淡入淡出什么？我以为你只是想让.collection-list-hover-desc 褪色，而且效果很好。由于您需要单独指定值，因此未进行背景位置更改。 “到处都是”——你到底是什么意思？我正在使用您提供的值。我不知道你想让它搬到哪里，这取决于你。
说我的背景图像高度为 200，显示 100...我想淡出，更改位置以显示其他 100 并淡入等...它就像一个图像精灵，调整背景位置但很好地淡出
@James 所以你想让元素淡出，图像背景位置在淡出时移动，然后将元素淡入？
@James 然后在取消悬停元素时反转它？（淡出，将背景移回原来的位置，然后将元素淡入？）
凌晨 5 点脑残，但我想试试看，我有叠加元素，我不想只淡出背景