Wondering if it's possible to make a jQuery animate property slower than another - here's what I have right now:
$(".thebox").animate({
height: "toggle",
opacity: "toggle"
},250);
When .thebox fades in and slides down simultaneously, I'd like to make opacity part of the animation slower, while making the height part faster.
The whole thing has to work with a button that on click causes the animation. It must be a toggle switch.
Thanks to anyone able to answer this!
Stack the animations on top of each other, and disable the default animation queueing.
$(".thebox")
.animate({height: "toggle"}, {duration: 250, queue:false})
.animate({opacity: "toggle"}, {duration: 500, queue:false}); // Runs twice as slow.
EDIT:
Since the events are triggered twice using toggle, we need a different approach, to detect wheter to hide or show the box. One simple solution would be a helper-class as such:
var theBox = $('.thebox');
if (theBox.hasClass('active')) {
// It is active, then fade it out
thebox
.removeClass('active')
.animate({height: 0}, {duration: 250, queue:false})
.animate({opacity: 0}, {duration: 500, queue:false});
} else {
// It is not active, show it
thebox
.addClass('active')
.animate({height: 'auto'}, {duration: 250, queue:false})
.animate({opacity: 1}, {duration: 500, queue:false});
}
Worth pointing out: The animations can be done using slideUp, slideDown, fadeIn and fadeOut instead of animate(). Also note the above assumes that there is only one element with the class theBox.
Related
I am using Jquery animation to make a pic grow and change her top, When i am using changing the height and width all the pictures are getting pixeled till the animation stop.
Is there a solution for this issue?
$( "#"+id+"" ).animate({
top: -261,
opacity:1,
width:251,
height:180
}, 500, function() {
});
You can see the issue in here: http://jsfiddle.net/h3atk/2/
Press the first pic of Jordan.
This is my code:
$('.content').delay(1000).animate({left: '10'}, {duration:1000, queue:false});
$('.content').delay(1000).animate({opacity: 0}, {duration:1000, queue:false});
Content div is supposed to move left 10px and fade out simultaneously, and it does just fine. Doesn't do the 1000 delay though. Does the queue:false negate the delay?
If you specify for an animation to not queue, the delay will be ignored because the delay is a callback added to the queue that the animation is ignoring.
Update:
$('.content').delay(1000).animate({left: 10,opacity: 0}, {duration:1000});
I am trying to make a div move from the bottom of the screen to the top, starting with opacity 0, having opacity 1 in the middle and fading again to 0 at the top.
Everything has to start with 3s delay.
$("#circle")
.css({'display':'block'})
.css({'opacity': '0'})
.css({'top':$(window).height()})
.delay(3000)
.animate({'opacity':1},{duration:1000},"linear")
.animate({'top':$(window).height()/2},{duration:1000, queue:false},"linear")
.animate({'opacity':0},{duration:1000},"linear")
.animate({'top':0},{duration:1000, queue:false},"linear")
I also tried with 'queue:false' but it still does not run properly, and this is also not linear.
Any ideas?
You should make better use of the object notation, such as :
$("#circle")
.css({
'display':'block',
'opacity': '0',
'top':$(window).height()
}
)
.delay(3000)
.animate({
'opacity':1 ,
'top':$(window).height()/2
},
{duration:1000},"linear")
.delay(1000)
.animate({
'opacity':0,
'top':0
},
{duration:1000},"linear");
You could try this or try to set delays between multiple lines using the $(this) selector.
Best of luck, it always help to have a jsfiddle link.
I want smooth transitions between tabs when the user clicks on a tab.
I know jQuery tabs supports basic animations (see this question about animation fx), but how can I do smooth transitions?
things got easier over the years, now it's a built in option for that, for example slide to-left-out and from-right-in is just:
$("#tabs .tabs-container-wrapper .tabs-container").tabs({
hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});
You will need to do a few things to get this working:
Do not use the CSS that comes with jQuery UI
Structure your HTML so your tabs can slide left and right.
Add CSS for the "left" transition. For example:
#tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
When a tab is selected, change the "left" value.
$(function() {
var onTabChange = function(event, ui) {
$("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
};
$('#tabs').tabs().bind('tabsselect', onTabChange);
});
See this gist for a full working example.
This will work with modern browsers that support transitions and fall back to normal tab behaviour if it's not supported.
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);