jQuery悬停效果-如何使其变慢

Question

大家好，我在jQuery:中得到了这段代码

function onRight() {
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
}

效果不错，但我遇到了一个问题，变化太快了。我怎样才能让它看起来像时尚in？或者只是用任何持续时间来减缓它？

**不能用css来做，因为它的渐变。

衷心感谢

Answer 1

这完全可以通过CSS实现：-如Ana Tudor所示：https://codepen.io/thebabydino/pen/jBbXPP

/* <- Demo Stuff Start */
body{
font-family: 'Montserrat', sans-serif;
margin:0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 80vw;
margin: 0 auto;
min-height: 100vh;
}
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
/* Demo Stuff End -> */
/* <- Magic Stuff Start */
.btn:hover { --x: 100%; }
.btn-1 {
--c1: #f6d365;
--c2: #fda085;
}
.btn-2 {
--c1: #fbc2eb;
--c2: #a6c1ee;
}
.btn-3 {
--c1: #84fab0;
--c2: #8fd3f4;
}
.btn-4 {
--c1: #a1c4fd;
--c2: #c2e9fb;
}
.btn-5 {
--c1: #ffecd2;
--c2: #fcb69f;
}
/* Magic Stuff End -> */

<div class="container">
<a class="btn btn-1">Hover me</a>
<a class="btn btn-2">Hover me</a>
<a class="btn btn-3">Hover me</a> 
<a class="btn btn-4">Hover me</a> 
<a class="btn btn-5">Hover me</a>
</div>

Answer 2

一个webkit转换应该完成。将0.5秒更改为您想要的时间。1.0秒或1.5秒等。这不是最有效的方法，但它是问题的快速解决方案，易于实施。

function onRight() {
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
}