I'm working on iphone like slider. It is <input type="range"> tag with button for sliding. When I'm moving the button to the end lock picture on the button must be changed to unlock picture. For this I'm changing background of the button from picture with lock icon to picture with unlock icon (both in one sprite pic). Like this:
$('.btn').css({'background-position': '-62px -104px'});
But for some reason picture not just changes, it's like sliding to the right and disappears and from left side coming the new picture instead. Strange animated effect. And I can't find the reason for this strange behaviour.
Can anybody explain to me why s it and what can I do?
I'm not sure, but maybe it will help: slider uses Zepto js instead of regular jQuery.
It sounds like you have css transitions active on the .btn element. That would cause the background image to transition over with a sliding effect.
Try adding the following css to the element:
.btn {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
Beware that this may have unintended consequences if any other part of your code relies on transitions being active.
See here for more information http://www.w3.org/TR/css3-transitions/#transition-shorthand-property
Try for example this:
$('.btn').css({'background-position': 'old position'}).hide();
$('.btn').css({'background-position': 'new position'}).show();
Related
In my project, I have a button that I want to display and hide under certain conditions. When the button is hidden, it should still take up space (meaning display: none; is not what I want) but it should not be visible and the user should not be able to interact with it. Changing the visibility does everything I want, but then it appears and disappears instantly, and I would like to have a smooth transition. When using the opacity, I can set the transition duration, but then the cursor still changes to a pointer when hovering over the button. By accident, I discovered that I can simply combine these two things to get the desired result: When I click on the button in the example, it fades out slowly, but once it is gone I cannot interact with it anymore. However, I don't understand why it works that way, since the visibility changes instantly, and I also don't know if it works like this in all major browsers. Could somebody answer these two things for me, please?
function hide() {
document.querySelector("button").style.visibility = "hidden";
document.querySelector("button").style.opacity = "0";
}
button {
transition-duration: 1s;
}
<button onclick="hide()">This is a test.</button>
You can use opacity and pointer-events. Also please don't use javascript for css stuff. In my example I add a class instead.
const button = document.querySelector('.js-disable')
button.addEventListener('click', function() {
button.classList.add('button--is-disabled')
})
.button {
background-color: #ededed;
padding: .5rem 1rem;
border: none;
}
.button--is-disabled {
opacity: 0;
pointer-events: none;
transition: opacity 2s;
}
<button class="button js-disable">Click me</button>
The question was basically: why does this work when visibility is changed instantly.
This is in fact not correct. visibility is interpolated and as you have the transition set on everything, the visibility will transition.
Obviously it can not have continuous values, but it 'chooses' a value of visible or hidden, which are the two endpoints you have specified, in steps. The place(s) at which it changes are determined by the timing function.
So, your code works absolutely fine. The element fades away with the opacity and at some point (near the end in the case of the ease timing function) it will switch from visible to hidden.
See for example MDN:
Visibility values are interpolated between visible and not-visible.
When in the responsive/mobile view of www.rohiniartstudio.com
When I click on the menu, the menu flickers on collapsing and displays the content below the menu.
On default it was taking about 1-2s before it shows the menu items then added this code:
.collapsing
{
-webkit-transition: none;
transition: none;
display: none;
}
Can someone help me out with the flickering issue?
Please visit the site and let me know?
Try removing the # value from the data-target property
Set as data-target="site-navigation".
You can't use display property when you want to make an animation with transition. The element and all the positions should be countable by CSS.
Refer: https://stackoverflow.com/a/38772750/9218664
If you want to make an animation on the mobile accordion menu you should use max-height property without display.
You can see how it happens here; https://codepen.io/volcanioo/pen/LYGaJdV
I'm building an accessible accordion using a definition list. I have this working well, where the <dt> contains a <button> which when clicked toggles an aria-expanded from true/false and toggles a hidden attribute on the corresponding <dd>. There's other things going on for accessibility but that's the basics for the list and the show/hide.
The show/hide display of the dd is then controlled via a hidden attribute selector (in this case, this is coming from the bootstrap stylesheet):
[hidden] {
display: none!important;
}
The show/hide functionality right now is a hard show/hide and I'm trying to add a nice animation via css transitions (this needs to work in IE11 where transitions are supported.)
I built a simple POC for the animation at http://jsfiddle.net/jokvqy6u/ which just toggles a show and hide class. This was just something I could quickly throw together and send out to our marketing team to illustrate the animation to get feedback on.
I thought I'd be able to just easily add hidden and :not(hidden) selectors to the POC and it would work just fine, then I could retrofit into the real accordion, but the animation doesn't seem to work with hidden attributes on the html. You can see a demo of that at http://jsfiddle.net/6zmdhqrn/2/ where the 2nd item animates because it does not have a hidden attribute. Items 1 and 3 have hidden attributes and do not even open up.
Does anyone know why this is happening and how I can get my transitions working with hidden attributes?
EDIT I have it sort of half working at http://jsfiddle.net/6zmdhqrn/3/ by overriding the [hidden] selector coming from bootstrap with some important statements. I still get a hard show, but the hide slides up. I suspect it has to do with the element being display:none where the animations have no dimensions/info to start animating from? Still looking for info/tips on how to get the opening animation.
You guessed right, the problem here is display isn’t an animatable CSS property.
You need to base your animation on an animatable property, such as opacity for example.
Here’s a quick demo:
const el = document.querySelector('div');
document.querySelector('button').addEventListener('click', () => {
if (el.classList.contains('visible'))
el.classList.remove('visible');
else
el.classList.add('visible');
})
div {
opacity: 0;
transition: opacity 0.3s ease;
}
.visible {
opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>
As you may have noticed, setting the opacity to 0 doesn’t hide the element completely (i.e. it still takes up space). In case this is something undesirable, you may consider animating a different property, such as width or height.
I want to make animation where if user clicks/hover the button with border radius that this animation runs.
Animation: Line starts say from top left corner and starts travelling/tracing at the edge/border/parameter and then completes going in clockwise direction.
Sort of like line animation. I have seen it but i dont remember where, i saw it in css version, no svg.
Check out the answers on this post. It's probably not exactly what you're looking for but it might give you some idea.
How to animate border drawing with jQuery?
To make a CSS Animation on a Button is very simple. You just need to define a class on that button and in your CSS code define what happens when that button is hovered over. Now, if you don't want to hassle with writing CSS hover code, you could use ButtonAnimations, a website that provides users with several button animations with the code so that they can implement it into their websites. I use it almost every day when i'm coding a CSS & HTML site from scratch. I have provided ButtonAnimation's link. ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required
But before you add animations to your button you need to create it first. (Let me remind you, ButtonAnimations provides you buttons to use beforehand)
<button class='test_button'> Hello StackoverFlow! </button>
And in the CSS do:
.test_button {
background-color: blue;
border-radius: 20px;
width: 200px;
height: 100px;
}
What this code will do is make an HTML Button and style it with CSS. The styling includes changing the width and height, changing the background color to blue and curving the edges of the button with border-radius: 20px;
Thanks for reading! Hope this helps.
Remember, check out ButtonAnimations - Create amazing looking buttons and animations with CSS, no javascript required if you want to present beautiful button hover animations on your website(s) just by simply using their prebuilt animations!
This might be helpful:
http://tympanus.net/Development/ProgressButtonStyles/
You can download the source from here:
http://tympanus.net/codrops/2013/12/12/progress-button-styles/
http://codepen.io/tylerkung/pen/Bukzy
I've implemented the self-correcting grid, so that when you resize the browser window, the 3 images will simply stack on top of each other.
I've also been able to make the images fade on mouseover.
But the last bit I wanted to add was to display a text on mouseover which seems tricky to me.
I'm just learning CSS so any help/articles/advice would be appreciated!
You want to change the opacity of the text when the container link is hovered so use this:
.wrapper:hover .text{
opacity: 1;
}
instead of
.text:hover{
opacity: 1;
}
See updated codepen
If you're looking for a simple tooltip, you may just add title attribute on each of the image.