jQuery hover effect- how to make that slow
0
hey people I got this code in jQuery:
function onRight()
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
works good but I got a problem, the change is too fast.
how can I make it looks like fadeIn? or just use any duration to slow it down?
** cant do it with css because its gradient.
thanks by heart
jquery html css
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
add a comment |
0
hey people I got this code in jQuery:
function onRight()
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
works good but I got a problem, the change is too fast.
how can I make it looks like fadeIn? or just use any duration to slow it down?
** cant do it with css because its gradient.
thanks by heart
jquery html css
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
1
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49
add a comment |
0
0
0
hey people I got this code in jQuery:
function onRight()
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
works good but I got a problem, the change is too fast.
how can I make it looks like fadeIn? or just use any duration to slow it down?
** cant do it with css because its gradient.
thanks by heart
jquery html css
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
hey people I got this code in jQuery:
function onRight()
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
works good but I got a problem, the change is too fast.
how can I make it looks like fadeIn? or just use any duration to slow it down?
** cant do it with css because its gradient.
thanks by heart
jquery html css
jquery html css
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
asked Nov 15 '18 at 22:44
hindi1991hindi1991
857
857
1
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49
add a comment |
1
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49
1
1
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49
add a comment |
2 Answers
2
active
oldest
votes
0
This is perfectly achievable via CSS alone:-
As shown by Ana Tudor Here : 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>answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
add a comment |
0
a webkit-transition should do it. change the 0.5s to how long you want it to take. 1.0 for a second or 1.5 for 1.5 seconds etc. this is not the most efficient way but it a quick solution to the problem and easy to implement.
function onRight()
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328922%2fjquery-hover-effect-how-to-make-that-slow%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
This is perfectly achievable via CSS alone:-
As shown by Ana Tudor Here : 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>answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
add a comment |
0
This is perfectly achievable via CSS alone:-
As shown by Ana Tudor Here : 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>answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
add a comment |
0
0
0
This is perfectly achievable via CSS alone:-
As shown by Ana Tudor Here : 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>answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
This is perfectly achievable via CSS alone:-
As shown by Ana Tudor Here : 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>/* <- 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>/* <- 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>answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
answered Nov 15 '18 at 22:52
Aaron McGuireAaron McGuire
43419
43419
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
add a comment |
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
I'm afraid that didn't work.
– hindi1991
Nov 15 '18 at 23:06
add a comment |
0
a webkit-transition should do it. change the 0.5s to how long you want it to take. 1.0 for a second or 1.5 for 1.5 seconds etc. this is not the most efficient way but it a quick solution to the problem and easy to implement.
function onRight()
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
add a comment |
0
a webkit-transition should do it. change the 0.5s to how long you want it to take. 1.0 for a second or 1.5 for 1.5 seconds etc. this is not the most efficient way but it a quick solution to the problem and easy to implement.
function onRight()
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
add a comment |
0
0
0
a webkit-transition should do it. change the 0.5s to how long you want it to take. 1.0 for a second or 1.5 for 1.5 seconds etc. this is not the most efficient way but it a quick solution to the problem and easy to implement.
function onRight()
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
a webkit-transition should do it. change the 0.5s to how long you want it to take. 1.0 for a second or 1.5 for 1.5 seconds etc. this is not the most efficient way but it a quick solution to the problem and easy to implement.
function onRight()
$(this).css(
'-webkit-transition","all 0.5s ease',
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
answered Nov 15 '18 at 22:55
Stefan TStefan T
365
365
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
add a comment |
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
we cannot have transition on gradient
– Temani Afif
Nov 15 '18 at 22:57
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328922%2fjquery-hover-effect-how-to-make-that-slow%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This? stackoverflow.com/questions/10963059/…
– Gurtej Singh
Nov 15 '18 at 22:49