We Keep Coding

jQuery menu animation only working on second click

I'm creating a menu that appears after a click on the hamburger button, (upper right corner) and I'm trying to use the jQuery function to slide it in rather than just having it appear.
The issue I'm having is that it only seems to activate the sliding bit on the second attempt.
I've seen a bunch of other questions about this but the answers are either "you've got a specific error in your code" or "you have to toggle or otherwise fake the animation on page load". I'm hoping my code is error-free and I'm not really keen to use a toggle hack just to bypass the first animation no-show.
Presumably, this is supposed to work the first time & every subsequent time.
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list").fadeIn(0);
$('li').toggleClass('logo2314441-mobile');
$('li').toggleClass('li-mobile');
});
UPDATE:
I also tested with this other snippet, but still not working, unfortunately...
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
.nav div.main_list ul {
width: 100%;
padding: 0;
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;
flex: 1;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(-140px);
}
.nav div.show_list ul {
overflow: hidden;
display: block;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(0px);
}
my question is: How do I get the animation to work first time without an onload fix/hack? Thanks in advance.

Test with this:
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
The callback will be triggered as soon as the Fade In is complete. Now the list will be visible and then the class is added, so the animation should start.

Use javascript .style with css transitions

I want to have my javascript element.style.visibility = 'visible'; and I need it to fade using the CSS transition I have. It doesn't currently fade it is just a snap transition.
NB: I need to use JS not jQuery.
JS:
function removeOverlay () {
var a = document.getElementById('overlay');
a.style.visibility = 'hidden';
}
}
// In another function
document.getElementById('overlay').style.visibility = 'visible';
HTML:
<div id='overlay' onclick='removeOverlay()'>
<span>Please enter a number e.g. 7.50</span>
</div>
CSS:
#overlay {
visibility: hidden;
background-color: rgba(0,0,0,.85);
top: 0; bottom: 0; left: 0; right: 0;
z-index: 9999;
position: absolute;
-webkit-transition: visibility 0.5s ease;
transition: visibilty 0.5s ease;
}
#overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
#overlay span {
color: white;
text-align: center;
vertical-align: middle;
display: inline-block;
position: relative;
}
Thanks :)

I don't believe visibility can be animated as it only takes 2 values. You should use opacity.

If your problem is just fading, and css transform is not extremely necessary, maybe you would be better off using a javascript approach. You could apply the fade effect using "setTimeout" and the ".style.opacity"
property of the DOM element. The method could work like this:
function FadeIn(id, opacity) {
var element = document.getElementById(id);
if(opacity == null)
opacity = 0;
SetOpacity(element, opacity);
if(opacity < 100)
{
setTimeout(function() {
FadeIn(id, opacity+10);
}, 100);
}
}
function FadeOut(id, opacity) {
var element = document.getElementById(id);
if(opacity == null)
opacity = 100;
SetOpacity(element, opacity);
if(opacity > 0)
{
setTimeout(function() {
FadeOut(id, opacity-10);
}, 100);
}
}
function SetOpacity(element, value) {
element.style.opacity = value / 100;
element.style.filter = "alpha(opacity=" + value + ")";
}
//Then call it like this:
FadeOut("div_id");
Yes, css transitions are actually lighter than js built ones. But for better control over timing and to apply the effect over many objects as you want, js can be very handy.

You can solve this by adding or removing a class from the object, and then having two sets of CSS transitions - one for the transition in and one for the transition out. They will have both opacity and visibility properties but different delay values, and potentially could have different durations and easing methods too.
Here is some example CSS. I've included only the CSS relevant for the transition, not any descriptive properties about the object itself.
/* fade out */
#hiddenobject {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-moz-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-ms-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-o-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
}
/* fade in */
#hiddenobject.showobject {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-moz-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-ms-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-o-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
}
In this case we have an object with an ID of 'hiddenobject' which is hidden from view. It has both an opacity of zero and the visibility attribute is hidden. We will add a class of 'showobject' to it, which will cause the item to be displayed, with an opacity of 1 and visibility of visible.
Visibility can only have two states really, it's either visible or it's not - there is no grey area in-between. So to show a fade we need to use the opacity property. The difficulty with opacity is that something with an opacity of 0 will still be present on screen - it can be clicked on, interacted with etc. which may not be desirable. The solution is to use both properties together.
When we add the 'showobject' class we transition the opacity from it's current value of 0 to it's new value of 1 with a duration of 500ms, or half a second. The delay attribute of that transition is set to 0 seconds, so it happens immediately. The visibility of that object was hidden, so in order to witness this fade in we need to immediately transition the visibility property to it's new state of visible. This transition has both a duration and delay of 0s, so it happens instantly - I've put linear easing as there is no need for any easing really, so may as well keep it simple - that's personal preference. So now our object is visible the moment we add the class and we see it fade in.
When we remove the class we want the fade to happen a bit quicker, so our default transition for the object has an opacity duration of 200ms, a fifth of a second. If we changed the visibility to hidden straightaway however we wouldn't see the fade at all, it would just disappear. So we have to delay the transition by a value equal to the length of the fade - in this case 200ms. Now our object completes it's fade to 0 opacity before changing it's visibility to hidden.
The visibility transition on the showobject class is pretty much what would happen with that property by default - an instant change - but we need to define it there to overwrite the delayed transition we've set on the element default.

Stupid issue with animate function of jQuery [duplicate]

This question already has answers here:
jQuery animate backgroundColor
(18 answers)
Closed 9 years ago.
Sorry for bad english.
The animate function of jQuery work fine at line 2. But at line 3 doesn't work... why?
$('.opac').hover(function(){
$('img', this).animate({opacity: '0.6'}, 500);
$('p', this).animate({background: 'orange'}, 500);
});
The HTML is this:
<div class="opac">
<img src="image.png" />
<p class="fot">text here...</p>
</div>
Thanks!
ps: the developer tool doesn't give any error...

jQuery doesn't support animating colors natively. Here's a quick plugin to include in your codebase:
From http://www.bitstorm.org/jquery/color-animation/
(function(a){function b(){var b=a("script:first"),c=b.css("color"),d=!1;if(/^rgba/.test(c))d=!0;else try{d=c!=b.css("color","rgba(0, 0, 0, 0.5)").css("color"),b.css("color",c)}catch(e){}return d}function c(b,c,d){var e="rgb"+(a.support.rgba?"a":"")+"("+parseInt(b[0]+d*(c[0]-b[0]),10)+","+parseInt(b[1]+d*(c[1]-b[1]),10)+","+parseInt(b[2]+d*(c[2]-b[2]),10);return a.support.rgba&&(e+=","+(b&&c?parseFloat(b[3]+d*(c[3]-b[3])):1)),e+=")"}function d(a){var b,c;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?c=[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?c=[17*parseInt(b[1],16),17*parseInt(b[2],16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?c=[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))&&(c=[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]),c}a.extend(!0,a,{support:{rgba:b()}});var e=["color","backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","outlineColor"];a.each(e,function(b,e){a.Tween.propHooks[e]={get:function(b){return a(b.elem).css(e)},set:function(b){var f=b.elem.style,g=d(a(b.elem).css(e)),h=d(b.end);b.run=function(a){f[e]=c(g,h,a)}}}}),a.Tween.propHooks.borderColor={set:function(b){var f=b.elem.style,g=[],h=e.slice(2,6);a.each(h,function(c,e){g[e]=d(a(b.elem).css(e))});var i=d(b.end);b.run=function(b){a.each(h,function(a,d){f[d]=c(g[d],i,b)})}}}})(jQuery);
You also need to set an initial color value to animate from (if you haven't already), and as far as I know (could be wrong) you should be using hex or rbg values for your colors to animate properly and not explicit color names.

In case you aren't opposed to CSS3: http://jsfiddle.net/MkgDC/1/
img {
opacity: 1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
p {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.opac:hover > img {
opacity: .6;
}
.opac:hover > p {
background: orange;
}

Or you can use jQueryUI
$('div.opac').hover(function(){
jQuery('img', this).animate({opacity: '0.6'}, 500);
jQuery('p', this).animate({backgroundColor: "#aa0000"}, 500 );
});
Fiddle

Background color cannot be animated. see this link
http://api.jquery.com/animate/

jQuery on hover opacity

I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.

You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
​
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).

Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});​
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/

$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)

This works:
​$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});​

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.

Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}

something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);

You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}