I'm having some trouble with finding the visibility param for JQuery.
Basically... the code below does nothing.
$('ul.load_details').animate({
visibility: "visible"
},1000);
There's nothing wrong with the animate code (I replaced visibility with fontSize and it was fine. I just can't seem to find the correct param name equivalent for "visibility" in css.
You could set the opacity to 0.0 (i.e. "invisible") and visibility to visible (to make the opacity relevant), then animate the opacity from 0.0 to 1.0 (to fade it in):
$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
Because you set the opacity to 0.0, it's invisible despite being set to "visible". The opacity animation should give you the fade-in you're looking for.
Or, of course, you could use the .show() or .fadeTo() animations.
EDIT: Volomike is correct. CSS of course specifies that opacity takes a value between 0.0 and 1.0, not between 0 and 100. Fixed.
Maybe you are just looking to show or hide an element:
$('ul.load_details').show();
$('ul.load_details').hide();
Or do you want to show/hide element using animation (this doesn't make sense of course as it will not fade):
$('ul.load_details').animate({opacity:"show"});
$('ul.load_details').animate({opacity:"hide"});
Or do you want to really fade-in the element like this:
$('ul.load_details').animate({opacity:1});
$('ul.load_details').animate({opacity:0});
Maybe a nice tutorial will help you get up to speed with jQuery:
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
You can't animate visibility. Either something is visible, or it's not (event 1% opaque items are 'visible'). It's much like half-existing - doesn't make sense. You're likely better off animating the opacity (via .fadeTo() etc).
This might help:
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
This is what worked for me (based on #Alan's answer)
var foo = $('ul.load_details'); // or whatever
var duration = "slow"; // or whatever
if (foo.css('visibility') == 'visible') {
foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function () {
foo.css({ visibility: "hidden" });
});
} else {
foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" });
}
When the foo element is visible, then slowly change the opacity to zero (via animate) and then wait until that's done before setting foo's visibility to be hidden. Otherwise, if set to hidden during the animate process then the fading out effect will not happen since it's hidden immediately.
Alternatively, you can use the simpler, cleaner fadeTo():
var foo = $('ul.load_details'); // or whatever
var duration = "slow"; // or whatever
if (foo.css('visibility') == 'visible') {
foo.fadeTo(duration, 0, function () {
foo.css({ visibility: "hidden" });
});
} else {
foo.fadeTo(duration, 1).css({ visibility: "visible" });
}
Related
I know this is fairly easy in jQuery, but I want to do this in plain 'ol "will be around forever" javascript.
I have a dropdown select on my page. I choose one of 8 options. There is a default image showing on the page. When I select an option, the image changes to that pic. It all works fine.
But I want to make the image change a fade out, fade in switch over because I, like most of you, can't leave well alone. We have to keep fiddling.
The javascript that I have, which is triggered by an onchange="setPicture()" on the select dropdown is:
function setPicture(){
var img = document.getElementById("mySelectTag");
var value = img.options[img.selectedIndex].value;
document.getElementById("myImageDiv").src = value;
}
This works fine. The value of the selected index is a string with the path for each image. I just want a fade out then fade in stuck in there somewhere. I have fiddled about a bit, calling another function before changing the src but no luck.
Can someone point me in the right direction?
The easier way would be to use css keyframes alone.
But from javascript there is the web animation api made for that.
Here is a quick modif from the example, to match your case.
function setPicture(){
alice.animate(
[
{ opacity: 1 },
{ opacity: .1},
{ opacity: 1 }
], {
duration: 3000,
iterations: Infinity
}
)
}
<button onclick="setPicture()">
OPACITY ANIMATION
</button>
<img id="alice"
src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif"
>
</img>
How about setting the image default CSS with the opacity of 0 and with transition time
then in JavaScript just add a class that will make the opacity set to 1
HTML:
<img class="img1" src="sampleimg.jpg">
CSS:
.img1 {
opacity: 0;
transition: all .3s;
}
.img1.show {
opacity: 1;
}
JS:
function setPicture() {
var img = document.querySelector('.img1');
img.src = 'urlofnewimage';
img.classList.add('show');
}
Hope this helps.
Juste one function for all :
function fadeOutEffect(target) {
var fadeTarget = document.getElementById(target);
fadeTarget.style.opacity = 1;
fadeTarget.style.transition = "opacity 2s";
fadeTarget.style.opacity = 0;
setTimeout(function(){
fadeTarget.style.display = "none";
}, 2000);;
}
Have a fiddle here:
http://jsfiddle.net/BP6rq/1514/
Fades my element out and puts it in a fixed position once it has reached the necessary point. I am using fadeOut() for the back-in effect. The problem is I do not want it to hide. I know about fadeTo, however I haven't been able to achieve that same effect. I've also tried overriding the display: none, but that eliminates the functionality of the fade effect. What can I do to maintain the fade effect, but not have fadeOut() disappear when scrolled back up and back to its original position?
Thoughts?
Use animate() together with css opacity instead of fadeIn fadeOut:
jsFiddle Demo
$(window).bind("scroll", function () {
$.fx.speeds.xslow = 250;
if ($(this).scrollTop() > 50) {
$('#bottomcta')
.animate({
'opacity': 1
},1000)
.addClass('fixed');
} else {
$('#bottomcta')
.animate({
'opacity': 0
},1000)
.removeClass('fixed');
}
});
I'm trying to animate changes of the CSS "display" property with Dojo and dojo/_base/fx.
Here's my code :
function invert_display(id) {
var element = dom.byId(id),
currDisplay = style.get(element, 'display'),
nextDisplay = currDisplay === 'block' ? 'none' : 'block';
baseFx.animateProperty({
node: id,
properties: {
display: 'none',
backgroundColor: '#f00'
}
}).play();
}
Everything seems to work fine, modules are imported properly (AMD style), variable values are valid and the div background-color turns red but the div doesn't fade out ("display" property set to "none").
Thanks you in advance !
The display style cannot really be animated, as it doesn't have any intermediate values between none and the visible states (block, inline etc).
To make it fade in/out, you need to animate the opacity style (Dojo's base fx actually already has functions for this). Since you also want to animate the colour, you can for example you can change your function into something like:
function invert_display(id) {
var element = dom.byId(id),
opacity = style.get(element, 'opacity');
baseFx.animateProperty({
node: id,
properties: {
opacity: opacity<1 ? 1 : 0,
backgroundColor: opacity<1 ? '#00f' : '#f00'
}
}).play();
}
Now, setting the opacity to 0 doesn't remove the element, it just makes it transparent. If you want to elegantly remove it as well, you could perhaps add height: opacity<1 ? 42 : 0 to the animation as well, making it "minimize" while fading. Alternatively, you can use the onEnd and onBegin functions to set the display style when the animation is finished/beginning (this doesn't always look very elegant though).
Example here: http://jsbin.com/aqigoj/1/edit
so, what is the different between:
A) (work for me)
... .animate({opacity: "show", marginTop: "25"}); ...
...
B (doesn´t work for me)
... .animate({opacity: "1", marginTop: "25"}); ...
e.g http://jsbin.com/iquwuc/6/edit#preview
When you call hide() that's roughly equivalent to .css('display', 'none'), so later changing opacity back to 1 changes the opacity of a hidden element. And that's why show() works - because it makes the element block again.
It is because you are show and hiding, instead of animating the opacity. (Kinda obvious :P ).
Edited code : http://jsbin.com/iquwuc/11/edit#preview
You can make the following amendments to use the opacity setting:
Add the following css:
.sub-menu li#access ul {opacity:0; display:none;}
And change your script to this:
$(document).ready(function(){
$('.sub-menu').hover(function(){
$('.sub-menu li#access ul').show();
$('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500);
},
function() {
$('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){
$('.sub-menu li#access ul').hide();
});
});
});
Basically what is happening is:
On hover, you are SHOW'ing the dropdown with opacity 0, then animation happens to set margin and opacity. and on hover-out, animating opacity to 0 and HIDE'ing it again.
in the css file or inline. Set the id or class to
inline - <div id="myid" style="opacity:0;"></div>
in css
#myid { opacity: 0; }
.myclass {opacity: 0; }
that way when calling the animate opacity from jQuery it will function other wise your just calling an animation that is already at 1 opacity
I would use dojo bibliothek for it (http://dojotoolkit.org/reference-guide/dojo/animateProperty.html). You will find in DOJO more than only animating functionality, this framework offers a lot of components to solve big area of different problems.
I'm trying to achieve a fade-on-hover effect with JQuery. Currently I have an element with a "hov" class attacked to it, without javascript the css will simply change it's color on :hover. With JQuery.
The idea is to clone the element as it's rolled over and place it directly infront, stripping it of the "hov" class so it's just static. Then I fade it out so it create the transition effect.
I'm having trouble though, after I strip the "hov" class from the clone, it KEEPS acting as though its still there. I can mouse over the clone even though it shouldn't be able to be targeted through hov. Any ideas / tips?
<a href="#" class="hov rounded-50 action-button">Fade Me Out< /a>
$(".hov").mouseover(function() {
// Clone the current element, remove the "hov" class so it won't trigger same behavior
// finally layer it infront of current element
var $overlay = $(this).clone(true).removeClass("hov").insertAfter($(this));
// Push it to the side just for testing purposes - fade it out
$overlay.css({left:'300px'}).fadeOut({duration:500, ease:'easeOutQuad'});
});
No need to clone the element, just fade the original element:
$('.hov').mouseenter(function() {
$(this).fadeOut();
});
// Optionally:
$('.hov').mouseleave(function() {
$(this).stop(true, true).show();
});
You can also use the hover function:
$('.hov').hover(function(){
$(this).fadeOut();
},
function(){
$(this).stop(true, true).show();
});
If you just want it to partially fade, you can animate the opacity property:
$('.hov').mouseenter(function() {
$(this).animate({'opacity': 0.5});
});
If you just want it to pulse, then return to normal opacity:
$('.hov').mouseenter(function() {
$this = $(this);
$this.animate({'opacity': 0.5}, {
'complete': function(){
$this.animate({'opacity': 1});
}
});
});
Finally, if your willing to forgo support of older browsers, you can do it all with css:
.hov {
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
}
.hov:hover {
opacity: 0.5;
}