I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place.
For fade In I'm using:
$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
and for fade Out I'm using:
$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);
The FadeIn works, but the fadeOut doesn't work.
Now, you may think that the problem is the last ',200' but I will need to use that as a delay since the fadeout/visibility:hidden is on mouseleave event after 200ms.
So my question is: How can I do the visibility hidden with animation to act as a fadeOut.
Thanks alot
$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);
why make it so hard, instead of animating the css, you could use the default fade functionality
$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);
edit
if you however want to fade it out without losing the height .
you can use fadeTo(duration, opacity, [callback]);
$('.drop1').fadeTo(200, 0);
check this example:
http://jsfiddle.net/ufLwy/1/
I was having similar issues, and here's what I ended up doing.
$.fadeToHidden = function ( selector, duration, complete ) {
$.when(
$( selector ).fadeTo( duration, 0 )
).done( function(){
$( selector ).css('visibility', 'hidden')
complete();
});
}
The reason I did this is that
fadeIn() / fadeOut() uses 'display' which F's up an element's height
fadeTo doesn't affect visibility, so while the element is visually hidden with opacity:0, users are still able to interact (i.e. click) the invisible element.
animate() is asynchronous so chaining CSS at the end doesn't guarantee that it will run when the animation is complete. Only by using the Deferred object that animations return ($.when() / $.done()) will you be guaranteed that the CSS is applied after all animations are complete.
EDIT
Alternatively, you could apply to visibility:hidden to each individual element once their respective animation is complete. This may be slightly quicker for selecting larger groups of elements, since you're only querying the DOM for the group of elements once.
$.fadeToHidden = function ( selector, duration, complete ) {
$.when(
$( selector ).fadeTo( duration, 0 , function(){
$(this).css('visibility', 'hidden');
} )
).done( complete );
}
I had a similar problem and I solved it this way:
To fade in :
$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);
To fade out:
$("#id").animate({opacity: 0.0}, 200, function(){
$("#"+txtid).css("visibility","hidden");
});
As you can see, I hide the div "#id" once the animation has ended.
I hope it's not too late
I know this is an old post but I came across a similar situation and this is what I ended up doing
$(".drop1").css("visibility", "visible").show().fadeOut(5000);
.drop1{ opacity: 0.0; }
$('.drop1').fadeTo( "slow" , 1.0);
Related
I want to make an image on my site to opacity 0.5 and then i want to "pop out" on this image a word with opacity equal to 1. The problem is that when i set image on whatever speed it starts to queue all functions as many times as i enter/leave image with my cursor.
the word is loading faster (immadietly) than image with 'slow' and
the word doesn't change opacity to 1, cus it's loosing opacity with
image (which is set to 0.5)
How to make "word" to load later than image?
How to make function not repeatable whenever I'm moving my cursor through image (like 10x/sec) so it won't queue everything and
continue to fadeTo until everything is done?
(the most important) How to make word to not inherit opacity from image?
$(document).ready(function(){
$('#classic').mouseenter(function(){
$('#classic').fadeTo('slow', 0.25)
{
$('#classic').append("Classic");
$("Classic").fadeTo('slow', 1);
};
});
$('#classic').mouseleave(function(){
$('#classic').fadeTo('slow', 1);
{
$('#classic').empty();
};
});
});
First of all, make sure that either (a) the element that has id="classic" is not an img--because imges should not have children--or (b) you are adding the text after the img and not appending it to it. I'm going to assume that there's a div with id="classic" which has an img child:
1) You have it almost right. To make the word fade in after the image has faded out you need to use a callback function. The syntax for this is:
$('#classic').fadeTo('slow', 0.25, function() {
// now the fading is done!
});
And not
$('#classic').fadeTo('slow', 0.25)
{
....
}
You'll also probably want to add opacity: 0 for an initial value on the text that you add to the DOM so you can then fade it in.
2) jQuery has a function just for this called .stop(). Call this function whenever you need to stop animations from queuing up. So change the above to:
$('#classic').stop().fadeTo('slow', 0.25, function() {
// now the fading is done!
});
3) In CSS all elements inherit opacity from their parent. The easiest fix for this is simply to make the added element a sibling (or any other DOM element) of the transparent element and not a child. Then use negative relative positioning to stick it over the transparent element. So, assuming this structure:
<div id="classic">
<img src="myPicture" />
</div>
you'd use this jQuery:
$('#classic img').stop().fadeTo('slow', 0.25, function() {
$('#classic').append("<span>Classic</span>");
$("#classic span").fadeTo('slow', 1);
});
Make only the image fade out and in, so its siblings are unaffected. And in CSS:
#classic span {
display: inline-block;
opacity: 0; /* make it 0 initially so we can fade it in */
position: relative;
top: -48px; /* or whatever value */
left: -88px; /* or whatever value */
}
So here's the combined jQuery:
$('#classic').mouseenter(function () {
$('#classic img').stop().fadeTo('slow', 0.25, function() {
$('#classic').append("<span>Classic</span>");
$("#classic span").fadeTo('slow', 1);
});
});
$('#classic').mouseleave(function () {
$('#classic img').stop().fadeTo('slow', 1, function() {
$('#classic span').remove();
});
});
Here's a JSFiddle. Hope this helps!
I've updated your code here: http://jsfiddle.net/3dytbr3m/1/
You should use classes on your buttons. Classes are identifiers that can be applied on multiple elements. That way you don't have to use double code.
I also use $(this) which means that you are targeting the element that has the mouse over.
When I hover over an img which fades to another img and sroll off too fast, the fadeOut gets stuck and the fade stays. I've tried the .stop() as I've seen in other responses, but still won't work. Is there something else I can put instead of the .stop()?
<div class="grid big-square">
<a href="#"><img id="image2" src="img/fade/creo.png">
<img id="image1" src="img/creo.jpg"></a>
</div>
<script>
$("#image1").mouseenter(function () {
$(this).stop(true, true).fadeOut(1000);
});
$("#image2").mouseleave(function () {
$("#image1").stop(true, true).fadeIn(500);
});
</script>
I seem to remember having a similar problem when I was creating this website.
The solution is to use a combination of .hover() and .stop() to ensure that only one animation is running at a time, which I think you have. Also ensure that the mouseover image is on top of the other image, and just fade that one in and out. The image fading out gets 'stuck' because at some opacity the .mouseleave() stops firing and the .mouseenter() starts firing on the other image.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
#image1 must be above #image2 for this to work, #image1 fades out to 'reveal' #image2 behind it. The code uses .animate() rather than .fadeIn() and .fadeOut() but the effect is the same.
Edit- to fade in another div after the end of the fadeoout animation use the complete call back of the animate function.
Something like:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000, function() {
$("#finalDiv").animate({ opacity: 1, 500 });
});
});
#finalDiv needs to be after the 2 <img />s in your html to appear above them.
I'm not sure how you're trying to accomplish this but I do know how it should be done.
Try this http://jsfiddle.net/xy5dj/
Make sure to listen for both events on the same element (preferably a wrapper element).
Take note that fadeOut actually removes the element from the rendered content (display: none) making sure that the mouse events won't fire on that element.
Side note:
A dirty trick that I used once (if you have to do this then you're doing something wrong) is to clear the style of the element after animation using the callback ability of the animate function i.e.
$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});
fiddle
You should use the animation/transition in form:
.fadeTo( duration, opacity, complete )
where complete is callback function.
I am writting a very cool jquery plugin and I'm finding myself snagged on this last bit. basically I'm animating an element on mouseenter and mouseleave. A good example can be found in this jsbin everything works well except when you hover over the back button before the go button has finished its animation it will move the image off screen. Assuming I know the starting location of the element, is there a way to keep the element from animating past its original location even if the animation is stopped early? I need to use .stop() for the animation. Maybe this is something easy that I'm just overlooking.
Code snippet from the jsbin link:
// Start animation
$( "#go" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});
stop accepts arguments that control how the animation is left. You may want to use .stop(true, true), which jumps the animation to the end when stopping it:
$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );
...but it might be a bit jumpy.
Alternately, as you say you know where the element starts, just return it there:
$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );
...where originalPosition is an object with the properties left and top, presumably. That might be a bit jumpy as well, it depends on the specifics of your use case.
Or as, again, you have the original position, you could just animate back to that position (or forward to that position + 100px, depending).
Here is my example: http://jsfiddle.net/MT5xS/
When you click the first picture, it is removed and all the following images move back to fill the space left by it. But they move too fast and you don't even get the notion that they moved.
My question is, how do I make these elements move smoothly? Basically like an iPhone when you move or delete an icon, like this http://youtu.be/-r7K4LTbI4A?t=27s
I'm not worried about IE6/7/8 or any other compatibility issues.
The most common solution I know off is to animate hide(), then in the callback function remove your image.
$('.user-pic').live('click', function() {
var $item = $(this).closest('li');
$item.hide('slow', function(){ $item.remove(); });
});
DEMO - Animate element removal
Take a look at this jQuery plugin: http://razorjack.net/quicksand/
It does what I think you are describing. You could use it or take a look under the covers to see how its being done. I believe they're using position: absolute on all the grid items.
Another option is to fadeTo 0, animate() the image width to 0, then remove().
http://jsfiddle.net/MT5xS/2/
Instead of removing the element on click, you want to fade the target element out and then remove the element. Note this cannot be accomplished by chaining remove after the desired animation.
If you chose to rely on old school setTimeout() you have to remember about correct variable scoping. Alternatively you could add a callback to be executed upon animation completion:
var $el = $(this).closest('li'); //no need to operate directly on img imo
$el.animate({
opacity: 0 //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
$el.remove();
});
Fiddled
I think what you want is to...
$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
$(this).remove();
});
Here is the fiddle http://jsfiddle.net/MT5xS/4/
Try this it will slide up and then remove
$('.user-pic').live('click', function() {
$(this).closest('li').slideUp('slow', function() {
$(this).remove();
});
});
I am using jQuery animate to change the position of multiple elements on the page (decorative elements). I want the element to be deleted if it exits body area. (if left is larger than body width or top is larger than body height).
The following can not be used in my case:
overflow hidden for the body
manually animating the element. I want to use jQuery animate to keep it simple (I dinamically create elements, animate them then I don't care about them, don't keep track of them, they have a .remove() methode when the animation is complete)
http://jsfiddle.net/a7Nck/
So in this JSfiddle I want the red div to dissappear when it reaches right edge of the body so that no scrollbars will appear.
Isn't there any CSS3 media query for example so that if a div is not in the viewport it will be hidden?
EDIT:
I just thought of a solution: get the width of the body prior to triggering the animation and then animate the top and left by using the minimum between the body size and what the animation should do. The problem is that this will affect animation speed.
You can use animate's step function.
The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.
var w = $(window).width()
$('div').animate({
left: '20px'
}, 500).delay(1000).animate({
left: '2000px'
}, {
step: function(now, fx) {
if (now > w) {
$(fx.elem).remove()
}
}
}, 1000);
Fiddle
One possible workaround (assuming your first restriction is about globally adding overflow: hidden on your CSS): add overflow: hidden with js when the animation starts, and remove it when it ends:
$('body').css('overflow', 'hidden');
$('div').animate({left: '20px'},400).delay(1000).animate(
{left: '2000px'},1000, false, function(){
$(this).hide();
$('body').css('overflow', 'auto');
});
http://jsfiddle.net/a7Nck/3/
Just hide the div when the last animation get completed i.e.
$('div').animate({left: '20px'},400).delay(1000).animate({left: '2000px'},1000, function(){ $(this).hide(); });
See DEMO
As soon as the div leaves the visible area, the scrollbar will appear. If you want to prevent the scrollbar from appearing, you can't allow the div to leave the screen. Here's my solution:
$('div')
.animate({left: '20px'},400)
.delay(1000)
.animate(
{left: ($(window).width()-$('div').width()) + "px"},
1000,
null, // default easing
function() { $('div').hide() }
);
Jsfiddle: http://jsfiddle.net/j4rdA/1/