Im trying to write a function that fades X elements out in sequence and once finished run another function.
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
function showTimeline(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
For some reason 'showTimeline()' runs at the same time and I can't understand why?
Full JS
$(document).ready(function() {
'use strict';
function init() {
function showPath(pro) {
fadeOut(pro);
}
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
$('.path').on('click', function() {
showPath( $(this).attr('data-pro') );
});
} //end init
init();
}); //end doc ready
You are calling showTimeline function in a loop. Call it this way instead ...
function fadeOut(pro) {
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200 * (i + 1)).fadeOut(200, function() {
$('.opening-title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.timeline-container').addClass('in-view');
console.log(pro);
}
You need to wait until all elements are faded. Working Example
But, basically just add a counter to know when all elements are faded:
var hiddenElements = 0;
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
hiddenElements++;
if (hiddenElements === $('.interactive ul li').length){
showTimeline(pro);
}
});
});
}
You can use jquery when
Hope this snippet will be useful
var fadeOut=function(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
var showTimeline=function(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
$.when(fadeOut()).then(showTimeline());
I am not able to completely test it but you can try this
$(document).ready(function() {
'use strict';
$('.path').on('click', function() {
$.when(fadeOut($(this).attr('data-pro'))).then(showTimeline($(this).attr('data-pro')));
});
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
});
Related
I have the massive block of JS below. What steps can I take to clean it up as it the same function iterated for different div each time. Im throwing this out there as a general question as Im not sure what can be done to simplify code like this.
$(function() {
$('#1').hover(function() {
$('#1-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#1-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#2').hover(function() {
$('#2-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#2-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#3').hover(function() {
$('#3-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#3-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#4').hover(function() {
$('#4-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#4-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#5').hover(function() {
$('#5-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#5-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#6').hover(function() {
$('#6-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#6-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
Assuming that the .pin-bounce is a child, you could create one hover function that works off of a common class and then inside of that just look for the class.
$('.some-common-class-instead-of-id').hover(function() {
$(this).find('.pin-bounce').addClass('pin-hovered');
}, function() {
$(this).find('.pin-bounce').removeClass('pin-hovered');
});
If it's not a child you could do something similar but instead of just finding children, you could build up a string like this:
$('.some-common-class-instead-of-id').hover(function() {
var idToFind = $(this).attr('id') + '-pin';
$('#' + idToFind).find('.pin-bounce').addClass('pin-hovered');
}, function() {
var idToFind = $(this).attr('id') + '-pin';
$('#' + idToFind).find('.pin-bounce').removeClass('pin-hovered');
});
You can use a for loop.
for (var i = 1; i <= 6; i++) {
(function(i){
$('#'+i).hover(function() {
$('#'+i+'-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#'+i+'-pin').find('.pin-bounce').removeClass('pin-hovered');
});
})(i);
}
I am trying to add a delay to the toggleclass 'slidein' however it doesn't seem to be adding to it.
here is my fiddle
and here is my code;
$(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
$(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Try this:
$(this).next().children('#slidinghold').delay(5000).queue(function(){
$(this).toggleClass("slidein").dequeue();
});
Fiddle
use setTimeout instead of delay. Sample :
$(".expand").on("click", function () {
$(".expand").next().children('#slidinghold').removeClass('active-expand');
$(this).next().children('#slidinghold').addClass('active-expand');
setTimeout(function () {
$('.active-expand').next().children('#slidinghold').toggleClass('slidein');
}, 500);
});
demo https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/
as said by jQuery's doc
.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases
So you can use window.setTimeout to achieve this:
$(function() {
function toggleClassDelay(element,class,delay) {
window.setTimeout(function() {
element.toggleClass(class)
},delay);
}
$(".expand").on("click", function() {
var el;
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
el = $(this).next().children('#slidinghold');
toggleClassDelay(el,"slidein",5000)
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}
Setting the Selector's:
btNext = $('<a>' + options.labelNext + '</a>').attr("href", "#").addClass("buttonNext");
btPrevious = $('<a>' + options.labelPrevious + '</a>').attr("href", "#").addClass("buttonPrevious");
btFinish = $('<a>' + options.labelFinish + '</a>').attr("href", "#").addClass("buttonFinish");
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
Click():
$(test).click(function () {
showStep(0);
});
$(btNext).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doForwardProgress();
if ($.isFunction(options.onNext)) {
if (!options.onNext.call(this, $(steps))) {
}
}
return false;
});
$(btPrevious).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doBackwardProgress();
if ($.isFunction(options.onPrevious)) {
if (!options.onPrevious.call(this, $(steps))) {
}
}
return false;
});
$(btFinish).click(function () {
if (!$(this).hasClass('buttonDisabled')) {
if ($.isFunction(options.onFinish)) {
if (!options.onFinish.call(this, $(steps))) {
return false;
}
} else {
var frm = obj.parents('form');
if (frm && frm.length) {
frm.submit();
}
}
}
return false;
});
ALL of the click functions work EXCEPT the selector (test), ive tried taking the click function out of the plugin and in a
$(document).ready(function () {});
and it still doesnt work thier, Please help.
Try doing:
test.click(function() {});
or
$("a.LinkMe").click(function() {});
// since test is a link having a class 'LinkMe'
But if those elements are dynamically added into your HTML, you can use .on() or .delegate()
$("a.LinkMe").on("click", function() {});
// OR
$(document).on("click", "a.LinkMe", function() {});
// OR
$("body").delegate("a.LinkMe", "click", function() {});
Take a look at this.
Instead of doing
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
You'll want to do instead
$test = $('a.LinkMe');
// or just
$test = $('.LinkMe');
Same for the btNext, btPrevious, btFinish. I'm not sure why they work, maybe someone else can explain it to me.
I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.
I found this:
Javascript Event Synchronization
Im working on it but dont works for me, that my code, i dont know if i miss something or what:
var Login = function ()
{
var commons = new Commons();
this.init = function()
{
stepOne(stepTwo);
commons.init();
}
function stepOne(callback) {
var AsyncDone = function()
{
callback();
}
loadFiles(AsyncDone);
}
function loadFiles(callback)
{
$(".header-container").load("views/header.html");
$(".content-container").load("views/login.html");
callback();
}
function stepTwo() {
addEvents();
}
function addEvents() {
alert("is here");
$(".login-log").bind("click", function() { alert("fuck"); });
}
}
The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.
I know that have to be simple, but i dont find the solution.
Thanks in advice.
My final choose:
this.init = function()
{
loadHeader(addHeaderEvents);
loadTemplate(addTemplateEvents);
loadFooter(addFooterEvents);
commons.init();
}
function loadHeader(callback) {
$(".header-container").load("views/header.html", function() {
callback();
});
}
function addHeaderEvents() {
}
function loadTemplate(callback) {
$(".content-container").load("views/template_login.html", function() {
callback();
});
}
function addTemplateEvents() {
alert("llega");
$(".login-log").bind("click", function() { alert("done"); });
}
function loadFooter(callback) {
$(".footer-container").load("views/footer.html", function() {
callback();
});
}
function addFooterEvents() {
}