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

Trigger opacity transition on mouse in and out

I want to trigger a opacity transition. If an element is hovered by the cursor, the cursor shall fade out, change its background-image and then fade in again. I wanted to achieve that by adding and removing a css class. It's not working, what is wrong?
js fiddle
HTML
<div class="wrapper">
<div class="cursor">
</div>
<div id="grey">
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;
cursor: none;
}
#grey {
width: 100px;
height: 100px;
background: grey;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}
.red {
background: red;
opacity: 1;
}
.green {
background: green;
opacity: 1;
}
JS
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
$('.cursor').removeClass('green').addClass('red');
}else{
$('.cursor').removeClass('red').addClass('green');
}
});

DEMO HERE
Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class
Whether cursor has entered element
Whether cursor has left element
Below is how you could actually do it.
var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
if(!entered)
{
//just to do it once and not on every mousemove you need to check here whether
//it has already entered and moving inside the element
entered=true;
left=false;//to check the vice versa operation
$('.cursor').fadeOut('fast',function(){
//callback function after fadeOut completes
$(this).removeClass('green').addClass('red');
}).fadeIn('fast');
}
}else{
if(!left)
{
left=true;
entered=false;
//same goes here too
$('.cursor').fadeOut('fast',function(){
$(this).removeClass('red').addClass('green');
}).fadeIn('fast');
}
}
});

you have to change background color , not opacity ( opacity is always 1 )
CSS
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: background-color .3s; /* Safari */
transition: background-color .3s ;
}
.red {
background-color: red;
opacity: 1;
}
.green {
background-color: green;
opacity: 1;
}

So you said your question is wrong, it is "no, I just made it easier for hier, in reality it is an background image" - so you transition between two background-images.
Here is how you do it:
You can not do it with CSS transition in ONE element/div
You will have to make two divs wich one background each
Increase the zIndex of the div you want to fade out in by one
Fade out div, while the new div stays at opacity: 1

jQuery: Is it possible to use slideUp and append text at the same time?

When a user mouses over a picture, I want to slideUp a description, so that new text will appear. When the user mouses out, the description will slideDown.
This is what I've tried so far:
$pic1.hover(function () {
var text1 = $("<div>Price1:$100</div>").hide();
text1.appendTo($('.this')).slideUp("slow");
},function () {
$(this).slideDown();
}
);
Unfortunately, this doesn't work. I googled around, but couldn't find anything. Is it possible to use slideUp and slideDown to show and hide the text?

A better approach would be to use CSS transitions. They're lightweight and easy to do. You can read the specification on transitions here. Here is a quick guide on the matter.
fiddle
HTML
<div class="imageDiv">
<img src="http://placekitten.com/g/200/300" />
<div class="imageDescription">
What a lovely kitty kat!
</div>
</div>
CSS
.imageDiv {
display: block;
float: left;
overflow: hidden;
position: relative;
width: 200px;
}
.imageDescription {
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
background: rgba(0, 0, 0, 0.4);
color: #f7f7f7;
left: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 100%;
width: 100%;
}
.imageDiv:hover .imageDescription {
display: block;
top: 93%;
}
There a few key things that make this work. First, a CSS transition is used. Transitions are written in the following form:
transition: [property] [duration] [timing-function] [delay];
As can be seen in the example above, I used a transition that targeted the top attribute. I gave it a 0.5s duration and an ease effect. However, this alone wouldn't produce the effect, as the description would just sit below the image and move up on hover. We don't want to see the description until the user hovers over the image!
To address this, you need to add overflow: hidden; to the parent div.imageDiv. This hides the image description, until the transition, when it will be slide up, causing it to no longer overflow.

http://jsfiddle.net/qvbgb/3/
HTML
<div class="imgcontainer">
<div class="image">
<img src="link.jpg" />
</div>
<div class="text">
<h3>Product name</h3>
<p>Description</p>
</div>
</div>
Jquery
$(document).ready(function(){
$('.text').hide();
$('.container').hover(
function () {
$(this).find('.image').slideUp();
$(this).find('.text').slideDown();
},function () {
$(this).find('.text').slideUp();
$(this).find('.image').slideDown();
}
);
})
CSS
.container{
min-width : 150px;
min-height : 150px;
width : 150px;
height : 150px;
cursor : pointer;
display : block;
}
.image img{
width : 150px;
height : 150px;
}

slideUp() will only hide an element, and slideDown() will only show an element. If you want to show an element with slideUp effect or hide with slideDown effect, you have to explicitly call it:
$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);

FadeIn FadeOut and why the div moves?

probably is something that I'm missing, but I have a little headache with this.
I'd like to have the "submenu div" align on the right of Show/hide links.
When I load the div is correctly in its place, but when I click to hide/show links, suddenly the div changes the place to the bottom.
BTW, is there any other better way to do this, or this this is good? Also, if I don't what to show the div on the page load, I'm thinking to use .hide() or hidden style, is that ok?
Example http://jsfiddle.net/DH75T/
Thanks in advance
CSS
div.inline2 {
display: inline-block;
width: 150px;
}
div.inline {
position:absolute;
display: inline-block;
border:1px solid #CCC;
background:#FFF;
}
JS
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').fadeIn();
});
$('a#hide').click(function() {
$('div#submenu').fadeOut();
});
});
HTML
<div class="inline2">
Show_links
Hide links
</div>
<div class="inline" id="submenu">
Link 1<br />
Link 2
</div>

fadeIn() adds div style display: block; so div shows down to next line
Before div was styled inline-block
div.inline2 {
display: inline-block;
width: 150px;
}
fiddle Demo
Use classes to add effect of fadeIn and fadeOut without moving your div to next line
$(document).ready(function () {
$('a#show').click(function () {
$('div#submenu').removeClass('hidden').addClass('visible');
});
$('a#hide').click(function () {
$('div#submenu').addClass('hidden').removeClass('visible');
});
});
css
.visible {
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}

Try:
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').removeClass("none");
});
$('a#hide').click(function() {
$('div#submenu').addClass("none");
});
});
Fiddle here.

You need to change only jQuery code :) :
<script type="text/javascript">
$(document).ready(function() {
$('a#show').click(function() {
$( "div#submenu" ).animate({
opacity: 1
}, 500, function() {
// Animation complete.
});
});
$('a#hide').click(function() {
$( "div#submenu" ).animate({
opacity: 0
}, 500, function() {
// Animation complete.
});
});
});</script>

Hide a div on hover outside of div

<div id='container'>
<div id="animate"></div>
</div>
I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .

This should do it
$('#small').hover(function () {
$('#animate').show();
}, function () {
$('#animate').hide();
});

Try:
CSS:
#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}
Script:
$(function(){
$('#container').mouseenter(function(){
$('#animate').fadeTo(1000,0)
.mouseenter(function(){$(this).fadeTo(1000,1)});
}); // use 750 in place of 1000 to animate it fast
});
Docs http://api.jquery.com/mouseenter/
HTML:
<div id='container'>
<div id="animate"> </div>
</div>
Fiddle: http://jsfiddle.net/aZmfz/4/

HTML:
<div id='container'>
<div id="animate">HI!</div>
</div>
CSS:
#container{
width: 100px;
height: 200px;
background-color: black;
}
#animate{
height: 50px;
width: 100px;
background-color: white;
opacity: 0;
}
jQuery:
$("#animate").hover(
function(){
$(this).stop().animate({
opacity: 1
}, 1000);
},
function(){
$(this).stop().animate({
opacity: 0
}, 1000);
}
);
EXAMPLE
You may not want to do a strict show/hide, because the element will have no height/width to hover over when it's hidden. Instead, you may prefer to set the opacity to 0 (to hide) or 1 (to show) and let the animate function transition between the two. You'll also notice that I used the .stop() function. This is because if you hover back and forth over the element it will continue to call the queued up animations. Calling stop first will prevent this.

You can achieve the same effect with pure CSS:
#animate {
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#container:hover #animate {
opacity: 0;
}
#container #animate:hover {
opacity: 1;
}
Demo: http://jsfiddle.net/gXz2A/