I'm trying to add an effect where if you click a button it blurs the background, but the original problem was that the edges where white for some reason, so i pushed them out by using negative margins which worked, but then when i tried to animate the blur and the edges seem to came back then disappear when the animation is done causing a flickering effect?
Jsfiddle: https://jsfiddle.net/xq2ohL4x/
$(function(){
$("#clickme").click(function(){
setTimeout(function(){
$(".image").css("-webkit-filter", "blur(18px)");
},1000);
});
});
Any ideas?
Thanks in advanced :)
See if this works for you. Change your transition to this.
transition: 2s -webkit-filter linear;
Related
I am trying to create two buttons that will move up when clicked. My problem is that after the animation occurs, the hover animation for the buttons no longer work. From my research I have gathered that it is something to do with animation-fill-mode: forward but I have found no solution that will allow the buttons to animate properly. Here is my relevant code
https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon
Forward animations will cause the element to retain the style values from the last keyframe when the animation ends. Simple remove the animation-fill-mode attribute and your hover animation should work.
Im gonna take a random stab. There is a severe lack of info here...
On hover, set animation-name or I guess maybe animation-fill-mode to none.
.elem:hover {
whatever: settings-you-want;
animation-name: none;
}
I just did something similar.
The animation will take priority over hover.
I have a Div with the id of center. I set the opacity of the Div to 0 in CSS file. when the window loads, I give the Div an animation:
document.getElementById('center').style.animation = "UP 1s forwards";
if the user click a button, I change the animation to:
document.getElementById('center').style.animation = "DOWN 1s forwards";
Problem: the second animation doesn't show up, the Div suddenly disappear.
A example fiddle or some more code might help. Lot of things could be wrong.
Your keyframes for the down animation might be starting with opacity 0;
You need to set some position property in CSS to use top/right/bottom/left properties. Check that.
There might be something wrong with the JS on click.
Just some things I can think of.
It feels like a toast animation by what you described. Here's a fiddle.
https://jsfiddle.net/thelessergeek/rj7a06hm/
Hopefully you were looking for that. My JS might be a little sad. Work it out as you see fit. Thanks!
I have a problem where browser is not aware of transform-origin change to dom element or better say it is aware but with delay.
I have a placeholder which i want to scale in on click. I have this piece of code where i calculate clicked element center and apply transform origin to transformed element.
$(".place-holder")
.css({
"-webkit-transform-origin":transCenterY+"px "+transCenterX+"px",
"transform-origin":transCenterY+"px "+transCenterX+"px",
"transform":"scale(2)"
});
What happens is that browser starts to scale to transform-origin: 50% 50% and in the middle of animation it shifts to correct transform-origin position.
If i apply scale 500 milliseconds after applied transform-origin the animation works.
This code works smoothly:
$(".place-holder")
.css({
"-webkit-transform-origin":transCenterY+"px "+transCenterX+"px",
"transform-origin":transCenterY+"px "+transCenterX+"px"
});
setTimeout(function(){
$(".place-holder").css("transform","scale(2)");
}, 500)
Here is the fiddle so you can see what is going on:
https://jsfiddle.net/r9xboa1b/
Click on the red squares - see the shift during transition?
You can only click once and then run fiddle again.
If you apply scale in timeout the shift is gone.
EDIT
What i actually want to achieve is smooth transition to the center of the each square without shifting and without timeout.
https://jsfiddle.net/r9xboa1b/
I resolved the issue.
The trick was, that i applied transition to all transformations on element.
Therefore the change in transform-origin was also transitioning 1s - and that explains the shift in animation.
So changing the
transition:all 1s;
to
transition:transform 1s;
did the trick.
For others that come to this problem - apply transition to only those transform properties you need.
I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help
skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations
Simply added a class on hover, and removed the class on mouse off.
I'm trying to animate a overlay using opacity when you hover the element, however it does not work. I can easily do it without the animation, but I would like to get a fade effect. I'm trying to achieve this with jQuery.
I want the overlay to not be visible when the image is hovered.
Take look at below jsfiddle-example:
http://jsfiddle.net/jem2M/1/
I've been looking for examples, but most of them use fadeIn and fadeOut, and I can't use that because the element should always be visible, only the opacity should change on hover.
Solved:
Forgot to enclose the selector. Working example:
http://jsfiddle.net/jem2M/4/
$('.bghover #background img') - you forgot (twice) to enclose your selector into quotes.
example fiddle : http://jsfiddle.net/jem2M/4/
I've just opened http://jsfiddle.net/jem2M/4/ (using my chrome 21) and it works fine. When you mouse over the image it animates the opacity to 1 , and when the mouse goes out the opacity is modified to 0.75