We Keep Coding

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>

Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
$(document).ready(function() {
$('#box').click(function() {
$(this).find(".hidden").toggleClass('open');
});
});
#box {
height:auto;
background:#000;
color:#fff;
cursor:pointer;
}
.hidden {
height:200px;
display:none;
}
.hidden.open {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
Initial Content
<div class="hidden">
This is hidden content
</div>
</div>
And a JSFiddle

Yes, there is a way:
http://jsfiddle.net/6C42Q/12/
By using CSS3 transitions, and manipulate height, rather than display property:
.hidden {
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.hidden.open {
height: 200px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
More here: Slide down div on click Pure CSS?

Since you're already using jQuery, the simplest thing is just to use slideDown(). http://api.jquery.com/slidedown/
There's also slideToggle().
Then you don't need to manually do all the browser-specific transition css.

I like the idea of CSS transitions, but it's still very jumpy. Sometimes the max-height has to be set to a very high number because of dynamic content which renders the transition useless as it's very jumpy. So, I went back to jQuery, but it had its own faults. inline elements are jumpy.
I found this to work for me:
$(this).find('.p').stop().css('display','block').hide().slideDown();
The stop stops all previous transitions.
The css makes sure it's treated as a block element even if it's not.
The hide hides that element, but jquery will remember it as a block element.
and finally the slideDown shows the element by sliding it down.

What about
$("#yourdiv").animate({height: 'toggle'});
Toggle will switch your div on/off, and the animate should make it appear from below. In this scenario, you don't need the specific CSS to "hide" it.

We can use visibility: hidden to visibility: visible instead of display: none to display: block property.
See this example:
function toggleSlide () {
const div = document.querySelector('div')
if (div.classList.contains('open')) {
div.classList.remove('open')
} else {
div.classList.add('open')
}
}
div {
visibility: hidden;
transition: visibility .5s, max-height .5s;
max-height: 0;
overflow: hidden;
/* additional style */
background: grey;
color: white;
padding: 0px 12px;
margin-bottom: 8px;
}
div.open {
visibility: visible;
/* Set max-height to something bigger than the box could ever be */
max-height: 100px;
}
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<button
onclick="toggleSlide()"
>
toggle slide
</button>

I did this workaround for the navigation header in my React site.
This is the regular visible css class
.article-header {
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
}
This is the class that is attached to the div (when scrolled in my case)
.hidden {
top: -50px !important;
transition: top 0.5s ease-in-out;
}

You can use also
$('#youDiv').slideDown('fast');
or you can tell that the active div goes up then the called one goes down
$('.yourclick').click(function(e) {
var gett = $(this).(ID);
$('.youractiveDiv').slideUp('fast', function(){
$('.'+gett).slideDown(300);
});
});
Something like that.

Fade out instantly and fade in with CSS3 transitions

I have problem.
I want to instantly fade out my square (after clicking a button) then afterwards, fade it in slowly with a delayed time.
This is my example fiddle:
http://jsfiddle.net/qFYL7/6/
I changed the class but i'm afraid it's not the proper approach:
my_square.className = 'dim_fast';
my_square.className = 'square';
Thanks for any help given!

Well, in your function you're changing the class to dim_fast and then immediately back to square, which has no transitions :)
So, remove:
my_square.className = 'square';
Or at least append the 2nd class:
my_square.className = 'square dim_fast';
To fade out the square, and then fade in after an amount of time, you can use setTimeout.
Example

HOW ABOUT A PURE CSS3 SOLUTION?
First you need to make sure that the button is positioned before the square.
<button id="bt1"> </button>
<div id="my_square" class="square"> </div>
This is because CSS doesn't have a "previous sibling" selector.
Now you must use the :active pseudo-element on the button, to directly hide the square.
#bt1:active + .square
{
-webkit-transition:opacity 0s;
-moz-transition:opacity 0s;
-o-transition:opacity 0s;
transition:opacity 0s;
opacity:0;
}
When you click the button, the square will instantly be hidden.
Now add the transition on the square.
.square
{
-webkit-transition:opacity 2s;
-moz-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
opacity:1;
}
The Square will Fade In in 2 seconds.
CHECK IT OUT

I would use animation for this instead of transitions
Altered CSS (from your jsfiddle)
.square
{
width:100px;
height:100px;
background-color:blue;
opacity:1;
}
.fade{
animation: dim_fast_shine_slow 1s;
}
#keyframes dim_fast_shine_slow{
99%{opacity:0;}
100%{opacity:1}
}
Altered script
var my_square = document.getElementById('my_square');
function dim_fast_shine_slow()
{
// remove class
my_square.className = my_square.className.replace(' fade','');
setTimeout(function(){
// add class after 50 millisecons to allow the DOM to register the removal of the class
my_square.className += ' fade';
},50);
}
document.getElementById('bt1').onclick = dim_fast_shine_slow;
Demo at http://jsfiddle.net/gaby/qFYL7/7/

It's as simple as:
function dim_fast_shine_slow() {
my_square.classList.toggle("dim_fast");
}
In your version you had:
function dim_fast_shine_slow() {
my_square.className = 'dim_fast'; //changes class to dim_fast
my_square.className = 'square'; // changes it back to square
}
In each click the element's class name will just end up being "square".

It's 2018 and this solution works in edge, chrome, opera and firefox. Does'nt work in my IE11 though caniuse says IE11 has full keyframes support.
const fade = document.querySelector('.fade');
const cont = document.querySelector('.container');
document.body.addEventListener('click', ev => {
if (ev.target.classList.contains('fade')) {
cont.classList.add('fade-out-in');
}
});
cont.addEventListener('animationend', ev => {
cont.classList.remove('fade-out-in');
});
#keyframes fadeOutIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.container {
width: 200px;
height: 200px;
margin-top: 10px;
background: red;
}
.fade-out-in {
animation: fadeOutIn 1s;
}
<button class="fade">Fade 1</button>
<button class="fade">Fade 2</button>
<button class="fade">Fade 3</button>
<div class="container"></div>

There should be a way of doing it without jQuery (which I am not aware of).. but in case u decide use jQuery :
$(my_square).hide("fast").show("slow");

How to add event listener to my javascript function

I have an animation on my page that slides a div into the screen, pushing the current div in the screen out. While it is animating, an ajax request is sent to grab a page and put it into the div.
For some reason, my code works OK on Firefox but stutters using Chrome.
Here is the page: (try clicking the left eye)
http://www.uvm.edu/~areid/homesite/index.html
What I want to do (as per recommendation of #jfriend00) is add an event listner to the slideOut() function to make it so the ajax request won't start until the slideOut() has finished. Separating the ajax call and the animation should lessen the load of the code and therefore prevent Chrome from stuttering as it does now.
here is my slide out function:
JAVASCRIPT:
function SlideOut(element) {
var opened = $(".opened"),
div = $("#" + element),
content = $("#content");
opened.removeClass("opened");
div.addClass("opened");
content.removeClass().addClass(element);
}
CSS:
#content {
margin: 0 auto;
position:relative;
left:0;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#content.right {
left:-1150px;
}
#content.left {
left:1150px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:1100px;
}
#content div {
cursor:pointer;
#left {
padding:0;
margin:0;
position:absolute;
top:0;
left:-1800px;
height:100%;
width:1750px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#C6421F), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(right, #C6421F, black);
/* Firefox 3.6+ */
background: -moz-linear-gradient(right, #C6421F, black);
/* IE 10 */
background: -ms-linear-gradient(right, #C6421F, black);
/* Opera 11.10+ */
background: -o-linear-gradient(right, #C6421F, black);
}
#left.opened {
left:0;
}
#left-content{
margin-left:70px;
position:relative;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
HTML:
<html>
<body>
<div id="fullContainer">
<div id="right">
<div class="return-right">
<p>click me</p>
</div>
<div id="resume">
</div>
</div>
<div id="left">
<div class="return-left">
<p>click me</p>
</div>
<div id="left-content">
</div>
</div>
<div id="top">
<div class="return">
<p>click me</p>
</div>
</div>
<div id="bottom">
<div class="return">
<p>click me</p>
</div>
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content" class="center">
</div>
</div>
</div>
</body>
</html>
It might be best just to use firebug on the actual site.
Thanks!

You're going to want to use the transitionend event to track when #left's transitions complete. You will have to check for browser prefixes which I've done below. After that we can use the designated prefix and listen. Once fired, you can make your ajax call.
Javascript:
var myDiv, transition;
myDiv = document.getElementById('left');
if('ontransitionend' in window) {
// Firefox
transition = 'transitionend';
} else if('onwebkittransitionend' in window) {
// Chrome/Saf (+ Mobile Saf)/Android
transition = 'webkitTransitionEnd';
} else if('onotransitionend' in myDiv || navigator.appName == 'Opera') {
// Opera
// As of Opera 10.61, there is no "onotransitionend" property added to DOM elements,
// so it will always use the navigator.appName fallback
transition = 'oTransitionEnd';
} else {
// IE - not implemented (even in IE9) :(
transition = false;
}
myDiv.addEventListener(transition, function(){
//make ajax call here.
}, false);

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.