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更改和褪色懸停的背景位置

回答

相關問題