Javascript jQuery或CSS在悬停时更改和淡出背景位置_Javascript_Jquery_Html_Css

Javascript jQuery或CSS在悬停时更改和淡出背景位置

javascript jquery html css

Javascript jQuery或CSS在悬停时更改和淡出背景位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经尝试了一些方法，但现在，我想淡出改变背景位置和淡出但不起作用。。。。有什么想法吗？还是更好的解决方案 $('.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("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>

您希望分别为

background-position-x

和

background-position-y

属性设置动画

$（'.collection hover a'）。打开（“mouseenter touchstart”，函数（事件）{
$（this）.find（'.collection list hover desc'）.fadeIn（1000）；
$（此）。设置动画({
'背景位置-x'：“-50%”，
“背景位置y”：“100%”
});
});
$（'.collection hover a'）。打开（“mouseleave touchend”，函数（事件）{
$（this）.find（'.collection list hover desc'）.fadeOut（1000）；
$（此）。设置动画({
“background-position-x”：“0”，
“background-position-y”：“0”，
});
});
。集合悬停a{
背景：url（'http://kenwheeler.github.io/slick/img/fonz1.png'）0 0不重复；
宽度：100vw；
高度：100vh；
显示：块；
}
.集合列表悬停描述{
显示：无；
}


此CSS应为您指明正确的方向：

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

他们有许多免费的版本，这正是你正在寻找的问题，只有几行。如下所示：
<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>


//调用Greensock CDN
$（“#您的元素”）。悬停（函数（）{
TweenMax.to（$（'.your-element-to-change'），1，{alpha:0.5，left:100，top:100}）；
})

该代码将使元素向左100像素，向下100像素，并在1秒内将不透明度更改为0.5。所有这些都可以更改以满足您的需要。
您的html在哪里？您可以提供一些html代码吗？如果您可以通过单击将html、css和jQuery包含在html模块中，这将使其他用户更容易辅助添加html片段，这可能会有所帮助。你到底想淡入淡出什么？我以为你只是想。收藏列表悬停desc淡出，这很好。没有进行背景位置更改，因为需要单独指定值。“到处都是”——你到底是什么意思？我正在使用您提供的值。我不知道你想把它移到哪里，这取决于你。假设我的背景图像高度为200，显示100。。。我想淡出，改变位置显示其他100和淡入等。。。。它就像一个图像精灵，调整背景位置，但褪色nicely@James所以你想让元素淡出，图像背景位置在淡出时移动，然后将元素淡入？@James，然后在取消悬停元素时反转？（淡出，将背景移回原处，然后将元素淡入？）早上5点大脑死亡，但我会给它一个裂缝，我有重叠元素，我不想只淡出背景
<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>