With this code, none of the animations happen - it skips straight to the location.reload(). However, if I remove location.reload(), the animations work fine.
How can I have both?
$( "#welcome" ).animate({
opacity: 0,
}, 100, function() {
})
$( "#signup_link" ).animate({
opacity: 0,
}, 200, function() {
})
$( "#forgotten" ).animate({
opacity: 0,
}, 200, function() {
})
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000);
location.reload();
Perhaps something like this: I'm assuming you want the animations and reload to fire as you have them sitting in your original post. jsfiddle: http://jsfiddle.net/Pv4RV/2/
note: I commented out the 'reload' part as that will then just generate a loop on the page.
$.when(
function(){
$( "#welcome" ).animate({opacity: 0,}, 100, function() {});
$( "#signup_link" ).animate({opacity: 0,}, 200, function() {});
$( "#forgotten" ).animate({opacity: 0,}, 200, function() {});
}()
).then(
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000)
).then(
location.reload()
)
Related
I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.
JS:
$(document).ready(function () {
var sliding = false;
var introButtons = anime({
targets: '.introButtons',
scale: 0.95,
duration: 800,
easing: 'easeInOutQuart',
direction: 'alternate',
elasticity: 200,
loop: true
});
//Energy Track
$('#for-energy').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#screen2').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Energy back
$('.energy .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen2').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For health
$('#for-health').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#health').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Health back
$('.health .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#health').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For fun
$('#for-fun').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#fun').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//For fun back
$('.fun .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#fun').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
});
I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.
When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.
You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/
I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click
in some function you miss to make sliding = false
and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle
$('#island').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('.guide').fadeOut('slow', function(){
$('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});
I am trying to figure out this framework, but I am having problems with implementing shaking effect. Everytime I hover over element other divs just dissappear. In fiddle i tried different JQuery and JQuery ui and it was working but selecting newest one just breaks the whole thing. ANy tips? Thank you!
https://jsfiddle.net/w11qknc4/
$( ".box" ).mouseenter(function() {
$( this ).effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );
$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});
This line is not necessary and causes your issue :
$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
Just use :
$( ".box" ).mouseover(function() {
$(this).effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});
If you wish to wait the end of an effect before another, see use :
var start = true,
delay = 1000;
$(".box").mouseover(function() {
if (start) {
start = false;
$(this).effect("shake", { direction: "up", times: 4, distance: 2}, delay);
setTimeout(function () {
start = true;
}, delay)
}
});
I'm adding animations to a website, and having a bit of a hard time adding easing. I can get the entire animation sequence to run correctly, but when I try to define the easing, the animations break on all the animations that come after the first element where I define easing.
The basic animation sequence is the bottom half the page fades in and flies up to meet the top half. Then three buttons fade in and fly up sequentially to their designated locations. It looks alright, but it would look a lot better with easOutBounce.
I have now been wrestling with this for too long, trying to figure out why adding the easing breaks my code. I'm guessing my syntax is incorrect.
THIS code works on all elements:
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 } );
} );
} );
});
BUT this code doesn't. When I run this code, it does add the easing and it still works on the .front-page-content-wrap, and the #box-button-1, but then it stops.
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
} );
} );
});
Any ideas?
PS, I'm using jQuery as the variable identifier instead of $, because I'm working in wordpress which runs in no-conflict mode.
Try this syntax: .animate( properties, options )
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
}});
}});
});
http://jsfiddle.net/mblase75/42BjC/
I'm in the process of finishing up a site and just working on making it ie7 compat, however theres one basic script that moves 3 tabs up/down and it's failing to work what so ever. the code is below.
$(document).ready(function() {
$('.lower').click(function() {
$('#range-dropdown').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower1').click(function() {
$('#range-dropdown2').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown3').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
$('.lower2').click(function() {
$('#range-dropdown3').animate({
top: '315',
}, 2000, function() {});
$('#range-dropdown').animate({
top: '0',
}, 2000, function() {});
$('#range-dropdown2').animate({
top: '0',
}, 2000, function() {});
$('.rangelist-container').animate({
top: '715',
}, 2000, function() {});
$('#dropdown-holder').animate({
marginBottom: '120px',
}, 2000, function() {});
});
});
any help would be greatly appreciated
*all css values are declared in the stylesheet.
You have stray trailing commas all over the place, for example:
$('#range-dropdown').animate({
top: '315', // <----------------- Right here
}, 2000, function() {});
Remove those so that it looks like this:
$('#range-dropdown').animate({
top: '315'
}, 2000, function() {});
IE7 gets upset by those trailing commas but most other browsers let it slide and DWIM (Do What I Mean) instead of complaining.
Try explicitly stating the units. You are saying '315', but what units is that in? Feet? Meters? Centimeters? Use '315px', as it explicitly states the units.
Also, you don't need to write function() {} over and over. Just omit it completely.
I have the following jQuery:
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}
How can I make it wait for the first one to finish?
http://api.jquery.com/animate/
animate has a "complete" function. You should place the 2nd animation in the complete function of the first.
EDIT: example http://jsfiddle.net/xgJns/
$("#div1").animate({opacity:.1},1000,function(){
$("#div2").animate({opacity:.1},1000);
});
$(function(){
$("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
$("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
});
});
http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/
You can pass a function as parameter to the animate(..) function which is called after the animation completes. Like so:
$('#div1').animate({
width: 160
}, 200, function() {
// Handle completion of this animation
});
The example below is a clearer explanation of the parameters.
var options = { },
duration = 200,
handler = function() {
alert('Done animating');
};
$('#id-of-element').animate(options, duration, handler);
Following what kingjiv said, you should use the complete callback to chain these animations. You almost have it in your second example, except you're executing your ShowDiv callback immediately by following it with parentheses. Set it to ShowDiv instead of ShowDiv() and it should work.
mcgrailm's response (posted as I was writing this) is effectively the same thing, only using an anonymous function for the callback.
Don't use a timeout, use the complete callback.
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
});
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });
This works for me. I'm not sure why your original code doesn't work. Maybe it needs to be incased in an anonymous function?