Response title
This is preview!
Delay progressbar until hidden page fadesIn
in Using jQuery
•
9 years ago
Hello everyone,
I have created a messy script for some hidden content that will fadeIn/fadeOut on click event and also, one of those pages (content actually) has a progressbar that animates the load to the percentage value i insert but the thing is that my animation plays in the background while the content is hidden.
I am in need of a method (probably a trigger on click or a delay) for my code that will allow me to delay the progressbar load till after my content fades in.
Here is the code for the Hide/fadeIn/fadeOut content :
- $(function() {
- $(".div1, .div2, .div3, .div0").hide();
- $(".link1, .link2, .link3, .link0, .link4").bind("click", function () {
- $(".div1, .div2, .div3, .div0").fadeOut();
- if ($(this).attr("class") == "link4")
- {
- $(".div1, .div2, .div3, .div0").fadeOut();
- }
- if ($(this).attr("class") == "link1")
- {
- $(".div1").delay(400).fadeIn();
- }
- else if ($(this).attr("class") == "link2")
- {
- $(".div2").delay(400).fadeIn();
- }
- else if ($(this).attr("class") == "link3")
- {
- $(".div3").delay(400).fadeIn();
- }
- else if ($(this).attr("class") == "link0")
- {
- $(".div0").delay(400).fadeIn();
- }
- });
- $(".link1, .link2, .link3, .link0, .link4").bind("click", function () {
- $('html, body').delay(400).animate({
- scrollTop: $("#articles").offset().top
- }, 500);
- });
- });
- (function( $ ){
- $.fn.animateProgress = function(progress, callback) {
- return this.each(function() {
- $(this).animate({
- width: progress+'%'
- }, {
- duration: 500,
- // swing or linear
- easing: 'linear',
- // this gets called every step of the animation, and updates the label
- step: function( progress ){
- var labelEl = $('.ui-label', this),
- valueEl = $('.value', labelEl);
- if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
- labelEl.hide();
- }else{
- if (labelEl.is(":hidden")) {
- labelEl.fadeIn();
- };
- }
- if (Math.ceil(progress) == 100) {
- labelEl.text('Done');
- setTimeout(function() {
- labelEl.fadeOut();
- }, 1000);
- }else{
- valueEl.text(Math.ceil(progress) + '%');
- }
- },
- complete: function(scope, i, elem) {
- if (callback) {
- callback.call(this, i, elem );
- };
- }
- });
- });
- };
- })( jQuery );
- $(document).ready(function() {
- // Hide the label at start
- $('#progress_bar1 .ui-progress .ui-label, #progress_bar2 .ui-progress .ui-label, #progress_bar3 .ui-progress .ui-label').hide();
- // Set initial value
- $('#progress_bar1 .ui-progress, #progress_bar2 .ui-progress, #progress_bar3 .ui-progress').css('width', '10%');
- // Simulate some progress
- $('#progress_bar1 .ui-progress').delay(500).animateProgress(18, function() {
- });
- $('#progress_bar2 .ui-progress').delay(700).animateProgress(39, function() {
- });
- $('#progress_bar3 .ui-progress').delay(900).animateProgress(43, function() {
- });
- });
Thank you in advance :)
1