We Keep Coding

Lightbox - Next and Prev buttons

So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/

Connect jquery-script with waypoints JS

I've included the waypoints.js script on my site. Now I would like to connect this script with some jquery. The script should "start" if the content is in the viewport.
On a different site I used
$('.fly-in-animation').waypoint(function() {
$(this.element).addClass('animated fadeInUp');
}, { offset: '100%' });
But I've no idea how to connect the waypoints script with these jquery:
$({countNum: $('#counter-laender').text()}).animate({countNum: 14}, {
duration: 2000,
easing:'linear',
step: function() {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function() {
$('#counter-laender').text(this.countNum);
}
});

Using the sample code from Waypoints site combined with what you provided (assuming you want this to happen when #counter-laender enters the viewport):
$(document).ready(function() {
$('#counter-laender').waypoint(function() {
myFunction();
});
});
function myFunction() {
$({
countNum: $('#counter-laender').text()
}).animate({
countNum: 14
}, {
duration: 2000,
easing: 'linear',
step: function () {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function () {
$('#counter-laender').text(this.countNum);
}
});
}

Animating several elements at the same time?

I saw another post on here saying this would work - and it's definitely not. Wondering why these are not all executing at once?
I am simply trying to get the top and opacity animations to happen at once. Here's a fiddle: http://jsfiddle.net/DU8N2/
$(".wordcar").animate({
top:"32px"
}, { duration: 2000, queue: false });
$(".wordcar li.next").animate({
opacity:"1"
}, { duration: 2000, queue: false });
$(".wordcar li.current").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.ondeck").animate({
opacity:"0.2"
}, { duration: 2000, queue: false });
$(".wordcar li.previous").animate({
opacity:"0.0"
}, { duration: 2000, queue: false });

It's not in a queue. Try setting the fade animations duration: 1000, instead of 2000 and there you have your magic.

jQuery Knob hover animation

I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(
Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?
This is the sollution of it plus a little fix that i will start and stop at the right values, so you can interupt the animation without breaking it
the HTML:
<input type="text" value="0" id="circle" />
the Javascript:
$(function() {
$('.circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
$('.circle').parent().hover( function() {console.log("hover");
$({ value: $('.circle').val() }).animate(
{ value: 100 },
{ duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: $('.circle').val() }).animate(
{ value: 0 },
{
duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
});
});
Here is the JSFiddle

you need to change the hover handler to the parent of #circle or change displayInput to true
$(function() {
$('#circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
//$('#circle').parent() is the new div that contains the input and the canvas
$('#circle').parent().hover( function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: 100 }).animate(
{ value: 0 },
{
duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
});
});//you need to close with ');'
you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/

jquery animation - when do they finish?

I have two jquery animations one by other:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
I want the animations to run simultanusly so I use {queue: false}:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
But now the completed callback called twice! How can I know exactly when does the both animations are done?

Using jQuery deferred methods try
$.when(
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing
}),
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing
})
).done( function( ) {
alert("done!");
});
Fiddle here

Why not remove the complete handler from one of the animations?
From the extract of code that you've posted, it looks as though you're using the same duration and easing methods on both animations. Therefore it's inherently true that they will complete at the same time, so long as they're being called at the same time...

this may sounds like something complicated, but why not Deferred Objects ?
http://api.jquery.com/category/deferred-object/
you may investigate more here
jQuery animation with deferred pipes?

According to http://darcyclarke.me/development/using-jquery-deferreds-with-animations/:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
$.when(books, laptops).done(complete);