Develop Reference

Why when I want to close drop down menu it has delay? [duplicate]

I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).
I'm giving one class max-height: 4em; overflow: hidden;
and the other max-height: 255em; (I also tried the value none, which didn't animate at all)
this to animate: transition: max-height 0.50s ease-in-out;
I used CSS transitions to switch between them, but the browser seems to be animating all those extra em's, so it creates a delay in the collapse effect.
Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that's the reason for the big value, so it doesn't cut off legit long text, only ridiculously long ones)
See the jsFiddle - http://jsfiddle.net/wCzHV/1/ (click on the text container)

Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
scss
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
}
css
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.text.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}

This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o)
So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when the max-height you use is larger than the actual height.
The idea is to use jQuery on load to find and explicitly set the heights of the "sectionContent" divs. Then add a css class 'noHeight' to each a click handler to toggle it:
$(document).ready(function() {
$('.sectionContent').each(function() {
var h = $(this).height();
$(this).height(h).addClass('noHeight');
});
$('.sectionHeader').click(function() {
$(this).next('.sectionContent').toggleClass('noHeight');
});
});
For completeness, the relevant css classes:
.sectionContent {
overflow: hidden;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.noHeight {
height: 0px !important;
}
Now the height transitions work without any delays.

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

Use display:flex. This will work:
.parent > div {
display: flex;
flex-direction: column;
height: 0px;
max-height: 0px;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
}
.parent > div.active {
opacity: 1;
height: 100%;
max-height: none; /* important for animation */
}

The solution is actually quite simple. Make a child div, that has the content. The parent div will be the one that expands collapses.
On load the parent div will have a max-height. when toggling, you can check the child height by writing document.querySelector('.expand-collapse-inner').clientHeight; and set the maxheight with javascript.
In your CSS, you will have this
.parent {
transition: max-height 250ms;
}

You can accomplish this just fine using jQuery Transit:
$(function () {
$(".paragraph").click(function () {
var expanded = $(this).is(".expanded");
if (expanded)
{
$(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
}
else
{
$(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
}
});
});
You can definitely tidy it up a bit to your liking, but that should do what you want.
JS Fiddle Demo

Javascript/jquery, why does my fadein/fadeout not work?

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?

You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle

Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});

Animation inside Block in hidden state

Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.

Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?

Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(

You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/

What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

jQuery toggleClass - can't animate or give it a transition

I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}

visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.

instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();

Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}

As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.