add some transition to div with setTimeout method pure in JavaScript - javascript

I want to add some transition when #div getting timeout. I also add webkitTransition in setTimeout method but not found transition. please help me also edit my code.
<!DOCTYPE html>
<html>
<body>
<style>
#div {
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
background:#BD5557;
position: absolute;
height: 500px;
width: 960px;
}
</style>
<div id="div">Display out after 1 second</div>
<script>
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){ x.style.display='none';x.style.webkitTransition = 'opacity 2s ease-in-out';
x.style.transition = 'opacity 2s ease-in-out';}, 1000);
}
displayOut();
</script>
</body>
</html>
</body>
</html>

The problem is that you are trying to apply display:none; at the same time you apply the transition.
Also there is no need to reapply all the css transition properties if they are declared in the css.
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){
x.style.opacity='0';
}, 1000);
}
displayOut();
Here is a working example

Related

Highlight area with backgroundcolor fadein/fadeout

Hi I'd like to highlight .small. Do not have access to add jQuery UI e.g. can't use .animate.
HTML
<span class="small">10 left</span>
jQuery
$(".small").css("background-color","orange");
Question: How do I add background-color orange and make it .fadeOut() here? This below doesn't work? Only want to fadeout the background color, nothing else.
$(".small").css("background-color","orange").fadeOut();
you can use CSS animations to do that
see snippet below
span {
background-color:orange;
animation-name:bckanim;
animation-fill-mode:forwards;
animation-duration:3s;
animation-delay:0s;
}
#keyframes bckanim {
0% {background-color:orange;}
100% { background-color:transparent;}
}
<span class="small">10 left</span>
You can use timeouts and css transitions nicely for this.
For more information about transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
$(document).ready(function(){
var $block = $('.block');
/** first timeout to make the document do its stuff before this thing runs **/
window.setTimeout(function() {
$block.addClass('orange-fade');
/** second timeout to turn it back to normal **/
window.setTimeout(function() {
$block.removeClass('orange-fade');
},2000);
},1000);
});
.block {
display:block;
width:200px;
height:200px;
background-color:green;
/** Transitions to give a nice effect **/
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.orange-fade {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" block transition">
Look at me! Look at you! now look back to me! i'm on a horse!
</div>
You can do something like this with css transitions on a class and then add or remove the class with JS.
HTML:
<span class="small">10 left</span>
CSS:
.small {
background-color: #fff;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 1s;
}
.orange {
background-color: orange;
}
JS:
$(".small").addClass("orange");
DEMO https://jsfiddle.net/ry5qxvos/
try this http://jsfiddle.net/x2jrU/92/ use this jquery to make background color of ur wish with fadein/fadeout option.
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
#target { width: 300px; height: 100px; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Highlight Me</div>

JQuery Toggle animation interfering with CSS height transition

I have a JQuery function to toggle a Div with ( toggle(200) ) so there is a small sliding animation.
However I have another function that will add a class to this div, which change the height of the div with a 0.3s transition.
#navbar {
height: 270px;
transition: height 0.3s ease-out;
}
#navbar.change-size {
height: 430px !important;
}
My problem is that the transition isn't just applying to the height (which was the intended purpose) but it also applies to the first JQuery function toggling when the div slides in.
My question is how can I set up my css so the height transition effect only applies to .change-size height ?
PS: I didn't add my JQuery toggle code as I believe it is not relevant. The JQuery sliding animation is probably tweaking the div's height/width to create the sliding effect, therefore being influenced by the transition I set up.
Please let me know if I'm unclear. Thank you !
Hope this helps
little fiddle
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
height: 270px;
-ms-transition: all .3s ease-out; /*IE*/
-moz-transition: all .3s ease-out; /*firefox*/
-webkit-transition: all .3s ease-out;/*safari and chrome*/
-o-transition: all .3s ease-out; /*opera*/
background-color: #999;
}
#navbar.change-size {
height: 430px;
}
</style>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="navbar">
Hello
</div>
<button id="toggle">.change-size</button>
<script>
$(function(){
$("#toggle").on("click", function(){
$("#navbar").addClass("change-size");
})
})
</script>
</body>
</html>

Simple css transition doesn't work

I have some problem with repeating animation in Firefox and Chrome.
I use simple js to make it repeatable.
(function step() {
setTimeout(function() {
var coin7 = document.getElementById('coin7');
coin7.style.display = 'block';
coin7.style.height = "210px";
}, 2000)
setTimeout(function(){
coin7.style.display = "none";
coin7.style.height = "0";
},6000);
setTimeout(step, 7000)
})();
Demolink http://jsfiddle.net/pe461zrn/
First iteration is ok in all browsers, but second and next doesn't apply css transition in FF39 and latest Chrome. And it's still work fine at all iteration in IE11.
How can I fix it?
try applying height with timeout 0 so you are sure it happens after display is set to block (which is something that would prevent animation)
setTimeout(function(){coin7.style.height = "210px";}, 0);
Try this..
Just remove coin7.style.display = 'none'; and thats the solution
HTML
<div id="coin7" style="">
<img src="http://us.cdn4.123rf.com/168nwm/kristijanzontar/kristijanzontar1101/kristijanzontar110100013/8612198-.jpg" />
</div>
CSS
#coin7 {
overflow: hidden; display: block; height: 0px;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
Javascript
(function step() {
setTimeout(function() {
var coin7 = document.getElementById('coin7');
coin7.style.display = 'block';
coin7.style.height = "210px";
}, 2000)
setTimeout(function(){
coin7.style.height = "0px";
},6000);
setTimeout(step, 7000)
})();
Check out this Fiddle

Jquery toggleClass not working applying to element

I'm trying to apply a toggleClass but it isn't applying the new class.
What's going on?
Click
<div id="main" class="invisible">
Hi there
</div>
.invisible{
opacity: 0;
}
.visible{
opacity: 1;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#main").toggleClass("visible");
});
});
Here's the jsFiddle
http://jsfiddle.net/Gilgamesh415/grxQX/17/
If you mean your fiddle, you forgot to add jQuery library, in the top left of the jsfiddle window.
Check here
If you mean your website check you have the jQuery library loaded by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> inside you head tags.
try this:
<script type="text/javascript">
$(document).ready(function() {
$("#s").click(function(){
$("#main").toggleClass("n");
});
});
</script>
<div id="main" class="m"></div>
<button id="s">click</button>
<style type="text/css">
.m
{ opacity:0;}
.n
{
width:100px;
height:100px;
border:2px solid yellow;
background:green;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
opacity: 1;
}
</style>
demo here:http://jsfiddle.net/65Hg4/1/
$("#cf_onclick").click(function(e) {
e.preventDefault();
$("#main").toggleClass("invisible").toggleClass("visible");
});
http://jsfiddle.net/grxQX/18/
And try using a self invoking anonymous function:
(function(){
.... //your code
}(jQuery));
instead of
$(document).ready(function(){...});
Since best practice is to load the scripts at the bottom of your page, just before the closing </body> tag, you don't need to check if the document has been loaded ($(document).ready()), it already has.
Like this http://jsfiddle.net/micka/94pNW/

expand div height onmouseover

I need height on the div 50px in default and it has to be changed to 300px onmouseover. I coded in below manner to implement it.
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>
This code is working fine but as per CSS property on hover its immediately changing its height. Now, I need a stylish way like slowly expanding div onmouseover and contracting onmoveout. How to expand and contract div on hover?
There are a few approaches -- here is CSS and Jquery, which should work in all browsers, not just modern ones:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
background: red; /* just for demo */
}
</style>
<body>
<div id="div1">This is div 1</div>
</body>
#div1{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
Easy!
In a "modern" browser, you can just apply a css transition effect:
#div1 {
-moz-transition: 4s all ease-in-out;
-ms-transition: 4s all ease-in-out;
-webkit-transition: 4s all ease-in-out;
-o-transition: 4s all ease-in-out;
}
This would apply a transition effect over 4 seconds with a ease-in-out easing for compatible firefox, ie, chrome/safari (webkit) and opera browser. Read more:
CSS Transitions
You can take this one step ahead and check if the current browser supports css transitions, if available, use them for animation and if not use a javascript animation script. Example for that:
BarFoos animations
You can use jQuery's .animate() This will act on any element with with a class of "tab", and will revert on mouse-out.
$('.tab').hover(function() {
$(this).stop()
$(this).animate({
height: '+=250'
}, 500)
}, function() {
$(this).stop()
$(this).animate({
height: '-=250'
}, 500)
})
You can use jquery's .mouseover http://api.jquery.com/mouseover/, .mouseout http://api.jquery.com/mouseout/, and .animate http://api.jquery.com/animate/ to perform that.
On the .mouseover event, you would animate the height to be 300px, and on the .mouseout event you would animate to 50px. Make sure you call .stop on the div before you call animate, otherwise you will have odd issues.

Categories