Before jQueryUI 1.9, I was able to use the following to toggle both the opacity and height at the same time:
$('#site-tabs').tabs({
fx: {opacity: 'toggle', height: 'toggle'},
});
Now that it was noted in the upgrade guide that fx is deprecated and to use the show() and hide() methods instead -- I can't figure out how to pass two effects to it. I've tried:
show: [{effect: "opacity"}, {effect: "slideToggle"}]
to no avail. Any pointers? Thanks as always!
#Zach I know this is rather old, but I had the same issue and I just wanted to confirm that you were on to something.
You can indeed build your own effect:
$.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
and use it like this show: { effect: "slideFadeToggle", duration: 500 }.
It is explained pretty well i think in the documentation.
$( ".selector" ).tabs({ show: { effect: "slide", duration: 800 } })
However, i don't see how you could make that both slide AND fade given the new api.
Related
I have built and uploaded this site here for a client. I used the Twitter bootstrap and customized it. My issue is the navigation it has jquery to animate the links. However i want this to disable and revert to an vertical list when screen size drops to phone size.
I know bootstrap already has the media queries built in but how do i do this.
Check the site and shrink browser to mobile size and you will see the list button appears but the links are still the same inside.
Not sure if i have made my point very clearly but more more info please ask.
Thanks
Here is the code responsible for animation:
$(document).ready(function () {
//When mouse rolls over
$(".blue").mouseover(function () {
$(this).stop().animate({
height: '100px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
//When mouse is removed
$(".blue").mouseout(function () {
$(this).stop().animate({
height: '50px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
});
Try matchMedia() to apply an animation only on small viewports:
if (window.matchMedia("(max-width: 480px)").matches) {
/* do animation here */
}
Of course you can change 480px to whatever you want or even check for other properties.
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.
Is it possible to have easing with this:
('#sideBar').hide('slide', {direction: 'right' },
800, function(){...});
At the moment it is very jittery as it is moving maybe.. 100 - 500 pixels (depending on content). I have been looking google and most people say to use easing, but when looking at the documentation i cannot see a property for easing.
You can specify the easing property in the options object (the second argument):
$('#sideBar').hide('slide', { direction: 'right', easing: 'easeOutBounce' },
800, function(){...});
Check out the easing documentation
Here's an example
First correct with
jQUery('#sideBar').hide('slide', {direction: 'right' },
800, function(){...});
http://docs.jquery.com/UI/Effects/Slide
Look on below page
http://docs.jquery.com/UI/Effects/Slide
OR
you can use animate
http://api.jquery.com/animate/
Also you can find easing cheat
For example.
http://gsgd.co.uk/sandbox/jquery/easing/
http://jqueryui.com/resources/demos/effect/easing.html
http://easings.net/
You can download the JQuery easing plugin from http://gsgd.co.uk/sandbox/jquery/easing, which provides smoother animations than the default ones included with jQuery. You can then easily set your global easing animation using the following code:
jQuery.easing.def = "easeInOutExpo";
You can of course choose whichever easing animation you prefer. This will affect all of your jQuery animations on the page, which isn't a bad thing if you're looking for consistency.
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'm currently writing an application using Zepto and phonegap, and I need to know how to call a function when an animation ends. Unfortunately, I can't really figure it out from the examples given or the documentation. So far, the closest I've been able to come is:
$('img').anim({ translatex: '500px', translatey: '500px', opacity: 1, complete: alert("Hello!") }, 2, 'linear');
Which will trigger the alert before the animation. Does anyone know how to fix this so that the alert will trigger after?
The callback function should be the last parameter of the anim call and you should wrap the alert in a function expression:
$('img').anim({
translatex: '500px',
translatey: '500px',
opacity: 1
}, 2, 'linear', function() { alert("Hello!") } );
One other possibility to help here is webkitTransitionEnd - http://www.cuppadev.co.uk/the-trouble-with-css-transitions/