I want to add a transition time to my pure javascript toggle class function
I knew how to code it but i forgot and now need some advice
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div{
width: 200px;
height: 150px;
}
.class1 {
color: #f00;
background-color: #2fadac;
}
.class2 {
color: #00f;
background-color: #c33;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
style.cssText ="-webkit-transition: all 0.5s ease-in-out;";
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>
any help would be appreciated
Try add the rule for transition in your target class itself.
.class1 {
color: #f00;
background-color: #2fadac;
-webkit-transition: all 0.5s ease-in-out;
}
.class2 {
color: #00f;
background-color: #c33;
-webkit-transition: all 0.5s ease-in-out;
}
Demo
Or just apply the rule in a separate rule:
CSS:-
.class1 {
color: #f00;
background-color: #2fadac;
}
.class2 {
color: #00f;
background-color: #c33;
}
.transition{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
HTML:
<div id="div" class="class1 transition">click here</div>
Demo
Add transition on your CSS
#div{
width: 200px;
height: 150px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
DEMO
Related
I'm trying to use CSS and javascript to fade in and out different colours for a div using multiple buttons and I got the code to work in codepen but when I tried to use it on the website it didn't work and I'm not sure why, the code is as follows:
$('.btn').on('click', function() {
var valColor = $(this).val();
$('.change').css({
background: valColor
});
});
.change {
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
background-color: rgb(25, 65, 196);
height: 15px;
width: 15px;
background-color: rgb(25, 65, 196);
border-radius: 50%;
display: inline-block;
}
<div class="change">
</div>
</br>
<button value="rgb(31, 221, 97)" class="black btn">On</button>
<button value="rgb(221, 56, 30)" class="red btn">Off</button>
like I said it worked in codepen but when I exported it and tried to use it in an HTML document it didn't work, I have no idea what the issue is so sorry if it is obvious.
Add Jquery script to your project in the <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is learn about Jquery:https://www.w3schools.com/Jquery/default.asp
$('.btn').on('click', function() {
var valColor = $(this).val();
$('.change').css({
background: valColor
});
});
.change{
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
background-color:rgb(25, 65, 196);
height: 15px;
width: 15px;
background-color: rgb(25, 65, 196);
border-radius: 50%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="change">
</div>
</br>
<button value="rgb(31, 221, 97)" class="black btn">On</button>
<button value="rgb(221, 56, 30)" class="red btn">Off</button>
As already mentioned you have to add jquery to your script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Besides that you might want to add the transition field without prefix and specifiy the color explicitly:
transition: background-color .6s ease;
I have some divs set up so they expand when you hover on them, but at the moment they aren't closing when you don't hover on them, it just stays on the last one you hovered on. How can I get it so they are all closed if you aren't hovering on one?
JS
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
tiles.removeClass('active');
$(this).addClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
CSS
.buttons .button h4 {
z-index:3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position:relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
padding: 15px;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
font-size: 81px;
}
.buttons .active p {
opacity: 1;
-webkit-transition: 0.25s all ease-in-out;
-moz-transition: 0.25s all ease-in-out;
-ms-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.buttons .active h4 {
margin-top: 15px;
display:none;
}
HTML
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test.jpg" alt="" />
<h4 style="color:black;">Documents</h4>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
hover can take a second function as a parameter which adds a handler for when the mouse leaves the element. You could remove the class again in there:
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
Its example from https://api.jquery.com/hover/
You can also use mouseover() and mouseout() if you want to do that differently.
I want to only use one div for the icon and one css selector.
Currently I have it working with two different background images being loaded.
fiddle: http://jsfiddle.net/6r0x4npd/
html
<h1>Hover over the icon</h1>
<div class="icon bell"></div>
css
body {
padding: 50px;
}
.icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjOTk5OTk5IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.icon:hover {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiB3aWR0aD0iMjEzLjAwMDAwMHB0IiBoZWlnaHQ9IjE5Ni4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDIxMy4wMDAwMDAgMTk2LjAwMDAwMCINCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4NCjxtZXRhZGF0YT4NCkNyZWF0ZWQgYnkgcG90cmFjZSAxLjExLCB3cml0dGVuIGJ5IFBldGVyIFNlbGluZ2VyIDIwMDEtMjAxMw0KPC9tZXRhZGF0YT4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDE5Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiDQpmaWxsPSIjNzk3OGU3IiBzdHJva2U9Im5vbmUiPg0KPHBhdGggZD0iTTEwMTAgMTkwNiBsMCAtNTMgLTY3IC02IGMtMzM1IC0zMiAtNTk1IC0yNzAgLTY1OSAtNjA1IC0xMSAtNTYgLTE0DQotMTcxIC0xNCAtNDczIGwwIC0zOTkgLTExOCAwIGMtNzggMCAtMTIyIC00IC0xMzAgLTEyIC0xNyAtMTcgLTE1IC02MyAzIC03OA0KMTIgLTEwIDE1NyAtMTQgNjYwIC0xOCBsNjQ1IC01IDAgLTExMiBjMCAtMTAwIDIgLTExNCAyMCAtMTMwIDE2IC0xNSAyNiAtMTcNCjQ4IC05IGwyNyA5IDMgMTIxIDMgMTIxIDMzMiA3IGMyMDcgNSAzMzYgMTEgMzQ0IDE4IDE2IDEzIDE3IDYwIDEgNzYgLTggOA0KLTUxIDEyIC0xMjkgMTIgbC0xMTcgMCAtNCA0MjcgYy00IDQwOCAtNSA0MzEgLTI3IDUwMyAtOTEgMzAzIC0zMzggNTEwIC02NTINCjU0NiBsLTU5IDcgMCA1MyAwIDU0IC01NSAwIC01NSAwIDAgLTU0eiBtMjM2IC0xODIgYzEyMyAtMjYgMjI2IC04MyAzMTkgLTE3Nw0KOTEgLTkyIDEzMyAtMTY2IDE2NSAtMjkzIDE4IC03MSAyMCAtMTExIDIwIC00ODEgbDAgLTQwMyAtNjg2IDAgLTY4NSAwIDMgNDM3DQpjNCA0MjYgNCA0NDAgMjcgNTAzIDg1IDI0MiAyOTggNDEwIDU1MSA0MzIgNzAgNiAyMTcgLTMgMjg2IC0xOHoiLz4NCjwvZz4NCjwvc3ZnPg==');
background-size: 40px 40px;
height: 40px;
width: 40px;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
I want to draw a border around my links on hover, with animation smth like this http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
Please give me some snippets or links.
Thank you
This is how i tried to animate it with jquery
$('a').on('hover', function() {
$(this).animate({ border: '1px' }, 'slow', 'linear');
$(this).animate({ border: 'solid' }, 'slow');
$(this).animate({ border: '#ccc' }, 'slow');
});
If you Have no Idea To like this:)
$("#block").mouseenter(function(){
$("#span1,#span2,#span3,#span4").show();
$("#span1").animate({
height: "50px"
}, 1500 );
$("#span2").animate({
width: "110px"
}, 1500 );
$("#span3").animate({
height: "55px",
top:"-5px"
}, 1500 );
$("#span4").animate({
width: "105px",
left:"-5px"
}, 1500 );
});
$("#block").mouseleave(function(){
$("#span1").animate({
height: "5px"
}, 1500 );
$("#span2").animate({
width: "5px"
}, 1500 );
$("#span3").animate({
height: "5px",
top:"50px"
}, 1500 );
$("#span4").animate({
width: "5px",
left:"100px"
}, 1500,function(){
$("#span1,#span2,#span3,#span4").hide();
});
});
See fiddle:Click me
OK, So i checked out the site, seems they are using a custom animation handler.
Here, this is the external js file that handles all the custom animation.
Custom Handler
Now what you have to do is create multiple divs for each line. Then customize it the way you want. If you want to have the exact same look-
For the horizontal divs,
position:absolute;
border-bottom: 1px;
width: 0px;
height: 0px;
border-bottom-color:#000;
border-bottom-style:solid;
For the vertical divs, just change border-bottom to border-left.
Now the jquery,I'll try to explain how the custom handler works, if you directly wan to copy paste,
Here you go .
First you define the div you want to animate, $fx('#theHeader1') then you add the parameters for making the animation work .fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10}), here-
type: Can be with,height,left,top that you want to change
from: Value to start from
to: Value up to
step: Describes speed (should be negative if going from greater value to smaller value)
delay: I guess its for smoothness.Without delay it appears buggy.
Just to say: Making that kind of animation will require a lot of time.
you can check this pen.the technique used is css transitions, no jquery involved
what you do need is like tannerjohn said, a div for each side of button
http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110
html:
<div class="main">
<div class="button">
enter
<div class="line-top"> </div>
<div class="line-right"> </div>
<div class="line-bottom"> </div>
<div class="line-left"> </div>
</div>
</div>
css:
.button{
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin: 70px 0 0 -60px;
border: 1px solid rgba(255,255,255,0.25);
}
.button .line-top{
position: absolute;
top: -1px;
left: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-right{
position: absolute;
bottom: 0;
right: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-bottom{
position: absolute;
bottom: -1px;
right: -1px;
width: 0;
height: 1px;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button .line-left{
position: absolute;
top: 0;
left: -1px;
width: 1px;
height: 0;
background: rgba(255,255,255,1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-top{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-right{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-bottom{
width: 122px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button:hover .line-left{
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
How can I make the color of the textbox border fade into another color when it is focused? For example if the border color was #ddd then the user focused on the textbox it would fade into #0266C8 and when they unfocus it fades into #ddd again. Here is my code:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="Limit is 5 characters";
} else {
if(x.length<6) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
<style type="text/css">
body {
margin:auto;
font-family:arial, sans-serif;
padding-top:100px;
}
.container {
width:920px;
margin:auto;
text-align:center;
}
.main_text {
font-family:"Bebas Neue";
font-size:76px;
color:green;
margin-bottom:10px;
}
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
}
.textbox1:focus {
border: 4px solid #0266C8;
}
#error {
font-size:24px;
color:red;
font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
<span class="main_text">Password Strength Checker</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.
Use CSS3 transitions.
.textbox1 {
border: 4px solid #ddd;
width: 888px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 16px;
font-size: 2em;
outline: none;
font-family: sans-serif;
border-radius:100px;
height:48px;
transition: background .5s ease-out; // global
-moz-transition: all .5s ease-out; // for mozilla
-o-transition: all .5s ease-out; // for opera
-webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
border: 4px solid #0266C8;
transition: background .5s ease-in; // global
-moz-transition: all .5s ease-in; // for mozilla
-o-transition: all .5s ease-in; // for opera
-webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}
You can set the fade delay on .5s ease-in
You can try to use CSS transition here:
transition: border-color 1s linear;
-moz-transition: border-color 1s linear;
-o-transition: border-color 1s linear;
-webkit-transition: border-color 1s linear;
Fiddle Demo
you can use:
.container input{
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.container input:focus {
border: 1px solid #4F94CD;
}