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.
Related
I can't understand why the .quote-container opacity is higher than #new-quote if they are in the same fadeTo() function brackets and duration is the same.
What I mean, that during fadeTo() animation, .quote-container and #new-quote opacity should be same, for example: opacity: 0.12 and opacity: 0.12, so they should stop and start at the same time. But now, it's like opacity: 0.12 and opacity: 0.20. #new-quote element opacity should be the same as the first element.
There is my codepen: See the Pen BJLPEV by Lukas (#Kestis500) on CodePen.
Unfortunately, I can't upload a video showing what is going on but the css opacity on both elements are the same: 0.
This line of code should be broken somehow:
getQuote().done(setTimeout(function() {
$("#new-quote").outerHeight($(".quote-container").outerHeight());
}, 1000), $(".quote-container, #new-quote").fadeTo(10000, 1));
$(".quote-container, #new-quote").fadeTo(10000, 1));
What am I doing wrong?
The issue is on these lines
$("body, .button").animate({
"background-color": colors[randomNumber]
});
$(".quote-text, .quote-author, #new-quote").animate({
color: colors[randomNumber]
});
You are applying animate separately on #new-quote that cause delay in rendering. Either remove animation on #new-quote or add dummy animation to .quote-container. Change the above to
$("body, .button").animate({
"background-color": colors[randomNumber]
});
$('.quote-container').animate({
"padding": "2.5rem"
});
$(".quote-text, .quote-author, #new-quote").animate({
color: colors[randomNumber]
});
$('.quote-container').animate({
"padding": "2.5rem"
});
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've got an app that looks like a Windows desktop. There are icons that open draggable windows (divs) which display the content.
When I close a window, this happens:
$('#element'+boxId).animate({height: 0, opacity: 0}, 'fast');
When I open a window, this happens
$('#element'+boxId).slideDown();
Problem is, once a window is closed, I cannot reopen it. If I want to see that window again I have to refresh the page and then open it.
Is there some way to do a cool fade out that does not completely remove the element?
I have also tried regular old slideUp() but that does the same thing.
This works fine, just not as cool looking.
document.getElementById('element'+boxId).style.display = "none";
The problem is that you are hiding it by affecting the height and opacity, and those aren't being reset by the slideDown. Here's one option:
http://jsfiddle.net/uggVb/
$('#hide').click(function (e) {
e.preventDefault();
var $div = $('#theDiv');
$div.data('originalHeight', $div.css('height'));
$('#theDiv').animate({
height: 0,
opacity: 0
}, 'fast');
//$('#theDiv').slideUp('fast');
});
$('#show').click(function (e) {
e.preventDefault();
$('#theDiv').animate({
height: $('#theDiv').data('originalHeight'),
opacity: 1
}, 'fast');
//$('#theDiv').slideDown('fast');
});
You could use the slide functions instead of the animate functions, either work.
How about only using jQuery to add and remove a hide class and use CSS transitions for the properties you want to animate?
jQuery:
$('#whatever').click(function(ev) {
var $el = $('#element' + boxId);
$el.toggleClass('hide');
});
CSS:
#element { /* or #element{{boxId}} or some class added to those elements */
opacity: 1;
overflow: hidden;
width: 100px; height: 100px;
transition: height 300ms, opacity 300ms;
}
#element.hide {
opacity: 0;
height: 0;
}
See demo
Not sure if it is what you want but you can look into jQuery hide/show functions
$('#element'+boxId).hide();
if you want slower/faster animation you can give hide parameter which represents animation speed(in miliseconds)
$('#element'+boxId).hide(1000);
I'm color cycling through the color, background-color and border-color css properties of some elements with the help of jQuery and this little plugin.
I'm doing this:
var currentColor = myRandNumber; // I get this variable from the main page
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d',
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ];
window.setInterval( animateColor, 2000 ); // not using requestAnimationFrame
// for browser compatibility
function animateColor() {
$(".new-project-header, .button a:active,
#logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a,
ul#menu-main-nav li.contact a:visited, .footer-twitter,
.footer-mail").animate(
{
backgroundColor: myWebColors[currentColor]
}, "slow");
$("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover,
h3.portfolio-item-title a:hover").animate(
{
color: myWebColors[currentColor]
}, "slow");
$("p a, p a:visited").animate(
{
borderColor: myWebColors[currentColor]
}, "slow");
if (currentColor == 9) { // the following cycles through the array
// in an endless loop
currentColor = 0;
} else {
currentColor++;
}
}
EDIT: jsfiddle HERE!
The problem I'm having is that when I hover over p a, while jQuery does the color cycling just fine, but once I mouseout the link will stay at its :hover state, with the latest color it cycled into.
It's even worse when I hover over ul#menu-main-nav li. It'll change the a:hover color, when that should only be applied to ul#menu-main-nav li.contact. It's like this latter selector :hover state is taking precedence over the css of the former.
Maybe I should do everything manually with on events? Maybe I should 'reset' all non- :hover states at the end of each loop step? Maybe all of this is overkill and I should try a different approach?
Thanks!
You need to change the state back to default when the mouse exits the element. I.e. hover completes.
JQuery hover can do this easily.
$( "a" ).hover(
function() {
$( this ).animate({ color: myWebColors[currentColor] }, "slow");
}, function() {
$( this ).animate({ color: default_color }, "slow");
}
);
Just out of curiosity, why wouldn't you use CSS:hover property as explained here http://www.w3schools.com/cssref/sel_hover.asp ?
First, you have a loop (setInterval()) that is running even if you didn't hover anything. It is useless.
So, i make an update of your Fiddle with setTimeout(). You can start from something like this. I also replaced :hover statments by event handlers. I don't know if it is ok for you. But this is how I should have done it. Hope it'll help.
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" });
}