jQuery或CSS更改和褪色悬停的背景位置

我已经尝试了几件事情，但在此刻，我想淡出更改背景位置和淡入淡出，但不工作....任何想法？或更好的解决方案？jQuery或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("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>

来源

2017-04-01 James

你的html在哪里？ – repzero

你能否提供一些html代码，如果你可以在html模块中包含html，css和jQuery，点击<>它会使其他s更容易协助 – Jpsh

添加html – James

的片段要单独动画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>

来源

2017-04-01 03:37:14

这是不是淡入淡出，其移动到位置和各地... – James

你是什么想要淡入淡出吗？我以为你只是想让'.collection-list-hover-desc'消失，而且工作正常。由于您需要分别指定值，因此未采用背景位置更改。通过“遍布各地” - 你的意思是什么？我正在使用您提供的值。我不知道你想把它移到哪里，这取决于你。 –

说我的背景图片是200的高度，并显示100 ...我想淡出，改变位置以显示其他100和淡入等....它就像一个图像精灵，调整背景位置，但很好地衰落 – James

这个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%; 
    } 
    } 
}

来源

2017-04-01 03:51:22 mika

一个超级简单的在页面上移动元素以及改变透明度的方式与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像素下来，并改变不透明度为0.5超过1秒的过程中。所有这些都可以更改以满足您的需求。

来源

2017-04-01 04:33:41 MataoDesigns

jQuery或CSS更改和褪色悬停的背景位置

回答

相关问题