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

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");
});

Hiding Dropdown "caret" when sticky header is present

So right now I'm building out our new website, and I've programmed a nice little sticky header using javascript. Here's my Javascript.
http://dev.yoursparksource.com
<script>
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.stickyheader1').addClass("sticky");
}
else{
$('.stickyheader1').removeClass("sticky");
}
});
</script>
And my CSS for the stickyheader and .sticky added class
.stickyheader1 {
position: fixed;
width: 100%;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
height: 85px;
}
.stickyheader1.sticky {
background: rgba(0,0,0,0.80);
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}
And this works PERFECT. My problem is the dropdown menu. I styled a little CSS caret, and when you scroll down and the header background activates, the caret is on top of the header's space, and you can see it behind the semi-transperent header. (EWW! Tacky...)
What I'm wondering, is how can I target this element, as it's an :after pseudo class.. Here's the current CSS for the caret (or top triangle as some call it.)
#nav ul ul:After {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgba(0,0,0,0.40) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 20px;
}
I tried just using the same javascript with the "#nav ul ul:After", but after researching, I learned how you can't add styles to a pseudo class. Duh, I knew that, just forgot. That's all. ;-) Any assistance on getting that little caret to go away when I scroll and the stick header's bg activates? Would be a lifesaver for me. (Also, if it can animate with the opacity transition like the header, that would rock. Once I figure out how to target it, I can add the css animation.
Thanks a MILLION in advance! I love StackOverflow.

You will need JavaScript to loop through the stylesheet, find the rule for #nav ul ul:After and set its display property to none after the sticky class is added to .stickyheader1.
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.stickyheader1').addClass("sticky");
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "#nav ul ul:After" || r.selectorText == "#nav ul ul::After") {
r.style.display = 'none';
}
}
}
} else {
$('.stickyheader1').removeClass("sticky");
}
});

Div Show Hide With Effect

I have hiding a div with the simple query.
I want add a effect when hiding the div.
here is my code
<script type="text/javascript">
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
dive.style.display = (dive.style.display == "none") ? "block" : "none";
}
<script>

I saw CSS3 in tags, so here is a pure CSS3 example:
.block {
transition: opacity 0.5s linear, transform 0.5s linear;
opacity: 1;
}
.block.hidden {
opacity: 0;
transform: scaleY(0);
}
Here's the fiddle: http://jsfiddle.net/andunai/1e21endf/
However, in this case the element will just disappear visually and won't free the place which it takes, so you'll have to end up with either making this element have position: absolute or animage padding, margin and max-height as well - note that transition of height is still having problems: How can I transition height: 0; to height: auto; using CSS?
.block {
transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
opacity: 1;
max-height: 30px; /* This one must be approximately of the
height of element, not less */
}
.block.hidden {
opacity: 0;
max-height: 0;
padding: 0;
transform: scaleY(0);
}
Here's an example of adding almost true scaling: http://jsfiddle.net/andunai/1e21endf/1/

If you want a pure CSS3 solution to fade out and then immediately hide, you can simulate the hiding of the element by setting the max-height to 0. You also need to set overflow:hidden when the element is hidden to ensure the max-height isn't affected by the contents.
When you animate the max-height, you delay it by the fade-out time and set the animation time to 0s to ensure it happens immediately when the fade-out has completed, and vice versa on show:
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
// toggle the class name - this will need to be more inteligent if it has multiple classes
dive.className = dive.className ? '' : 'hidden';
}
#divcustumfld {
transition: opacity 2s linear, max-height 0s linear 0s;
opacity: 1;
background: red;
max-height:100%;
}
#divcustumfld.hidden {
opacity: 0;
transition: opacity 2s linear, max-height 0s linear 2s;
max-height: 0;
overflow:hidden;
}
<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>

It is not recommended but for idea see output below,you can make an interval and can make opacity alter with each interval. I advice you to use css3 or jquery for effects
var count= 1;
i = setInterval(function(){
divcustumfldshow(count)
if(count==10)
clearInterval(i);
else
count++;
},200);
function divcustumfldshow(count1) {
var dive = document.getElementById("divcustumfld");
if(count1==10)
{dive.style.display = "none";}
else {
console.log(dive.style.opacity)
dive.style.opacity = (10-count1)/10;
}
}
#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}
<div id="divcustumfld">
</div>

demo - http://jsfiddle.net/thjzgv93/
you can use css3 opacity to hide the element
#divcustumfld {
opacity:1;
transition: .5s linear;
}
#divcustumfld.hide {
opacity:0;
}
or you can use translate
demo - http://jsfiddle.net/thjzgv93/1/
#divcustumfld {
transition: .5s linear;
}
#divcustumfld.hide {
transform:translatey(-100%)
}

<div id="divcustumfld">
Your data elements
</div>
Ok
$('#btn1').click(function(){
$('#divcustumfld').hide();
});
http://jsfiddle.net/mynameisvikram/vv0ranzo/

Fade one image into another using css or jquery

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-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;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
CSS
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-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;
}
#cf img.top:hover {
opacity:0;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-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;
}
#cf img.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo