Animate the change to 'disabled' state using in jQuery (or Javascript) - javascript

Question
Is it possible to animate the change to and from an input's disabled state using jQuery (or some other Javascript library)
Details
Have different CSS styles for a regular input and one that is disabled. When changing between the different states, would like the user to see the previous state fade into the new state.
Is it possible to animate this change just by changing 'disabled' state of the input? Perhaps by doing something like this:
// CSS
input{
background-color: white;
}
input:disabled{
background-color: grey;
}
// Javascript
$.find('input').animate({'disabled': false});
Or will I need to change the disabled state of the input, and then animate the input styling change separately?
// Javascript
$.find('input').prop('disabled', false);
$.find('input').animate({'background-color': 'white'});

You can achieve this with CSS transitions and the :disabled pseudo-class
$("#handler").change(function(){
$("#myInput").prop("disabled", $(this).is(":checked"));
});
input[type="text"] {
background: #fff;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}
input:disabled {
background: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="handler" />
<br />
<input type="text" id="myInput" />

Related

ease transition on night mode button

I have a simple JavaScript light/dark mode button but I don't know how to make the transition ease out as well as in. Here's the CSS:
.night-mode {
background-color:#2a2d30;
color:white;
transition:0.4s ease-in-out;
}
Here's the JS and HTML:
<button onclick="night()">night mode</button>
<script>
function night() {
var element = document.body;
element.classList.toggle("night-mode");
}
</script>```
The problem is that you put the transition in the class you're setting/removing, it should be independent from it.
What I would do, if you're just changing the body element is to set up the transition in that as:
body {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
.night-mode {
background-color:#2a2d30;
color:white;
}
Note that in the code above I don't set the transition for every single property but only for those which we actually want to be animated.
Naturally if you want the animation to work not on just the body but specific elements (for example some parts of your UI need to remain the same, also for example link don't inherit the colors) I would create an utility class like:
.with-colors-transition {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
and apply that to all the elements you want to add/remove the night-mode
You can do this if you add another class called dark-mode-off. Then, set the body class to that. In the JS, add a global variable to check if darkmode is on or off. Depending on that, replace the current class with the other one.
var darkmodeon = false;
function night() {
var element = document.body;
if (darkmodeon) {
element.classList.replace("night-mode-on", "night-mode-off");
} else {
element.classList.replace("night-mode-off", "night-mode-on");
}
darkmodeon = !darkmodeon;
}
.night-mode-on {
background-color: #2a2d30;
color: white;
transition: 0.4s ease-in-out;
}
.night-mode-off {
background-color: #fff;
color: black;
transition: 0.4s ease-in-out;
}
<body class="night-mode-off">
<button onclick="night()">night mode</button>
</body>
To avoid a lengthy if statement, you can make it one line:
element.classList.replace(darkemodeon ? "night-mode-on" : "night-mode-off", darkemodeon ? "night-mode-off" : "night-mode-on");

Font-family CSS transition

I want to get a hover animation that changes the font-size and font-family the same time. I didn't manage to change back the font family precisely when the font-size transition has finished. Is this even possible?
What I have:
a{
-webkit-transition: font-size .2s ease;
-moz-transition: font-size .2s ease;
-o-transition: font-size .2s ease;
-ms-transition:font-size .2s ease;
transition: font-size .2s ease;
}
a:hover{
font-family: "MyHoverFont";
font-size: 3em;
}
What I tried:
a{
...
-webkit-transition: font-family.2s ease;
-moz-transition: font-family .2s ease;
-o-transition: font-family .2s ease;
-ms-transition: font-family .2s ease;
transition: font-family .2s ease;
}
a:hover{
...
font-family: "MyHoverFont"
}
You can't use animations or transitions with font-family. This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another.
But I found a good workaround for this (here):
You could do the following: have two divs, each with the same text but
different font. The second div is absolute positioned below the first
div and hidden by default. When the times comes to "morph" the font,
animate the first visible div opacity to 0, and the second div to 1.
It should look like it's morphing at the expense of a little more
convoluted mark up.
Hint
It seems like you do something like the following:
a {
...
transition: font-size .2s ease;
...
transition: font-family .2s ease;
}
But in this case, the second rule overwrites the first rule, so the following is what you usually do:
transition: font-size .2s ease, font-family .2s ease;
Modern browser now support Variable fonts where you can control the available font's settings.
You could also go to this example for controlling the settings.
var changes = [
"'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
"'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2"
];
// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];
// Change variation every 2 sec
var index = 0;
setInterval(function(){
text.style.fontVariationSettings = changes[index];
index = index === 0 ? 1 : 0;
}, 2000);
#font-face{
font-family:"Recursive";
src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
font-weight:300 900;
font-display:swap
}
#text{
text-align: center;
height: 100px;
font-size: 50px;
line-height: 100px;
font-family: Recursive;
font-weight: 500;
transition: 0.5s font-variation-settings ease-in;
}
<div id="text">Hello World</div>
Not all font and options is supported, if you want to find some variable font's resource you could go to this link.
You can use a variant version font, because font-variant uses a mathematical formula for transitions that css transition understands:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
I answered this in another question that I raised in Stack Overflow.
The Javascript demo is at:
https://www.cqrl.in/dev/font-transition-js.html
The GitHub code is here:
https://github.com/Sukii/font-transition
The TUGBoat paper is here:
https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html

Make CSS hover element permanent onclick

So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"

Highlight Border Color Using Jquery Animate?

I want to highlight the borders of a textfield using animate function, when click on Add Animation Link.
Like this:
Js Fiddle Here: http://jsfiddle.net/N9um8/20/
HTML :
<div>
<p>
<input type="text" name="search" id="search" placeholder="Search for people...." class="field_style">
</p>
<p> Add Animation </p>
</div>
<p class="styling"> I want it like this when click on Add Animation :</p>
<div>
<p>
<input type="text" name="test_search" id="test_search" placeholder="Search for people...." class="test_field_style">
</p>
</div>
CSS:
.field_style { width:400px; }
.styling { color:red; }
.test_field_style {
border-color: #6EA2DE;
box-shadow: 0 0 10px #6EA2DE;
width:400px;
}
Jquery:
$(".add_animation").click(function (){
$("#search").focus().animate({ "background-color": "#B6DADA" }, 800, "linear");
});
backgroundColor is not an animatable property with jQuery animate by default. In general, it cannot animate colors. You will have a much better time using simple CSS transitions although they are not as widely supported (IE9- will not).
.field_style {
width:400px;
transition: box-shadow .8s linear;
outline: 0;
}
.field_style:focus {
box-shadow: 0 0 10px #6EA2DE;
border-color: #6EA2DE;
}
http://jsfiddle.net/N9um8/31/
.8s is a bit long for the animation by the way.
You have a couple of different options. The best performance-wise would definitely be CSS:
The JS:
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).css({backgroundColor: '#B6DADA'});
}).blur(function() {
$(this).css({backgroundColor: '#fff'});
}).focus();
});
The CSS:
#search {
-webkit-transition: .8s background linear;
-moz-transition: .8s background linear;
-ms-transition: .8s background linear;
-o-transition: .8s background linear;
transition: .8s background linear;
}
The fiddle
Another way is using a jQuery plugin or something (my favorite is called jquery color) to animate your colors.
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).animate({backgroundColor: '#B6DADA'}, 800, 'linear');
}).blur(function() {
$(this).animate({backgroundColor: '#fff'}, 800, 'linear');
}).focus();
});
The fiddle
Try with this plugin : http://www.bitstorm.org/jquery/color-animation/ and append :
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
An example here:
http://jsfiddle.net/N9um8/20/

How to return a button to its inactive state in mobile browsers

On touch-screen devices how do I return an HTML button back to its non-active state, after it has been pressed? Hover and active pseudo selectors are currently styled the same:
button.largeButton {
font-size:15px;
padding:0 18px;
height:36px;
background:#fff;
border:none;
border:2px solid #1a1a1a;
box-shadow:0 0 6px rgba(0,0,0,0.18), inset 0 0 6px rgba(0,0,0,0.18);
letter-spacing:1px;
color:#1a1a1a;
border-radius:1px;
-webkit-transition: all 0.09s ease-out;
-moz-transition: all 0.09s ease-out;
-o-transition: all 0.09s ease-out;
transition: all 0.09s ease-out;
}
button.largeButton:hover,
button.largeButton:active {
background:#1a1a1a;
color:#fff;
box-shadow: inset 0 0 9px rgba(255,255,255,0.18);
-webkit-transition: all 0.09s ease-out;
-moz-transition: all 0.09s ease-out;
-o-transition: all 0.09s ease-out;
transition: all 0.09s ease-out;
border-color:#333;
}
A CSS only solution is preferable, but a JS/jQuery is fine.
jsFiddle Demo
Perhaps you should attempt this by segregating your class names for active/hover a little bit
button.largeButton:hover,
button.largeButton:active {...}
could become
button.activeButton:hover,
button.activeButton:active {...}
and then once the button had been clicked, this class would be removed.
sample html
<button class="activeButton largeButton">
jquery to remove class
$(".activeButton").click(function(){$(this).removeClass("activeButton");});
There is no pure css way to do this unfortunately. The best way would be to use :visited however, that is not possible because
Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.
- MDN :visited
Unfortunately, there's no way that I know of to be able to, post-click, return to inactive state. The way to do this in jQuery is very simple though.
$('.largeButton').click(function() { $(this).blur(); });

Categories

Resources