success: function(html){
var halfh = html.height;
$('#contact_'+id).show();
$('#contact_'+id).css({'width':'90%'}).animate({
opacity: '0.6',
height: halfh
}, 500 ,'linear').animate({
opacity: '1',
},500,'linear',function(){ <--- Error on this line
$(this).html(html.content)
});
Note: I changed it all to Double quote like:
opacity: "0.6",
height: halfh
}, 500 ,"linear").animate({
opacity:"1",
},500,"linear",function(){
BUT still same error :(
Please help.
Regards
As in my previous comment. There is a trailing comma.
opacity:"0.6",
height: halfh
}, 500 ,"linear").animate({
opacity:"1"
},500,"linear",function(){
as #soderslatt wrote in the comment, there is a wrong comma. removed it and optimized your code a bit.
success: function(html){
$('#contact_' + id).show().css({'width': '90%'}).animate({
opacity: 0.6,
height: html.height
}, 500, 'linear').animate({
opacity: 1
}, 500, 'linear', function() {
$(this).html(html.content);
});
}
}, 500 ,'linear').animate({
opacity:'1', <--- Remove this comma
},500,'linear',function(){
Related
I have a function that swaps the position of two nodes.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000
});
padre.animate({
position: posInizFiglio,
style: {
backgroundColor: 'red'
}
}, {
duration: 2000
});
I'd like to execute a function after the padre.animate() function has ended.
I tried to use the complete property in animate() but it skips the animation and immediatly executes the function.
I even tried to use setTimeout but I get the same result, the function is immediatly executed and there is no animation
The animation works if i use it by itself
You need to use the complete callback:
complete: A function to call when the animation is done.
figlio.animate({
position: posInizPadre,
style: {
backgroundColor: 'green'
}
}, {
duration: 2000,
complete: function(){
console.log('Animation complete');
}
});
I have done one example which is working fine with complete function
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.3/cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.animate({
pan: { x: 50, y: 50 },
zoom: 1,
style: {
backgroundColor: 'red'
},
complete:function(e){
console.log('Complete');
},
}, {
duration: 2000
});
</script>
</body>
</html>
I would like to add a description text to my progress bar. This description text shoud appear at the left top of the bar. The best way to do it is by modifying my Javascript. It should be very easy to do but i don't have a lot of knowledge in js and I don't know how to do it.
Here is the code :
HTML :
<div id="cont"></div>
CSS :
#cont {
margin: 10px;
width: 100%;
height: 5px;
position: relative;
}
JS :
var bar = new ProgressBar.Line(cont, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#ed1100',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#ed1100'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1.0); // Number from 0.0 to 1.0
It also uses another JS you can find here : http://progressbarjs.readthedocs.org/en/1.0.0/
Code in use :
https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/
Can someone help me to add this description text ?
You mean like this?
https://jsfiddle.net/k5v2d0rr/1996/
You could just extend the "bar" object with your own function:
bar.addText = function(text) {
jQuery(this._container).append("<label>" + text + "</label>");
}
You then call your function after loading your bar.
bar.animate(1.0); // Number from 0.0 to 1.0
bar.addText("Hi");
Note: for simplicity I've added jQuery for DOM manipulation.
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?