We Keep Coding

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);
}
});
}

Two divs on each other animation

I just want to create the animation like in this website http://www.msambition.de/. I have created 2 divs 1 on other. I have jquery code as below:
$(document).ready(function() {
$('div.unternehmen-ahover').hover(
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeIn();
},
function () {
});
$('div.unternehmen').hover(
function () {
},
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeOut();
});
});
Te problem is that on hver it works fine but it remains on other div sometimes and does not do slidetoggle. Kindly help me in this regards.
Thanks in advance

You should create mouseenter and mouseleave event handler for your div and there you should slideToggle. See this link.
$(document).ready(function ()
{
$(".tile2").mouseenter(function () {
$(".trainingmood").delay(0).animate({ opacity: 0 }, 300, "");
$(".text2 span").delay(100).animate({ opacity: 1 }, 300, "");
$(".text2").animate({ marginLeft: "-=310px" }, 300);
});
$(".tile2").mouseleave(function () {
$(".trainingmood").delay(0).animate({ opacity: 1 }, 300, "");
$(".text2 span").animate({ opacity: 0 }, 3, 00, "");
$(".text2").animate({ marginLeft: "+=310px" }, 300);
})
});

Adding easing to image pan

I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?

http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});

How to change div style when click to another

I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});

You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
FIDDLE

Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});

optimize JavaScript setTimeout

What would be a better way of writing this:
setTimeout(function() {
$('#clock').animate({
'marginTop': '-20px'
}, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
$('#submit').animate({
'top': '-5px'
}, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
$('#details').animate({
'top': '-200px'
}, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
$('#details').animate({
'top': '19px'
}, 100, $.bez(bezierEasing));
}, 600);

Create a function:
// adjust your function accordingly...
function animateIt(selector, speed, top) {
setTimeout(function() {
$(selector).animate({
'top': top
}, speed, $.bez(bezierEasing));
}, 600);
}

Instead of using some weird timeOut chain why you don't use TimelineMax from greensock.com.
It's far more advanced and way easier to use.

Just throwing out my version...
function animateEl(selector, css, speed, timer) {
var tmp = parseInt(speed, 10);
if (!isNaN(tmp)) {
speed = tmp;
}
return setTimeout(function () {
$(selector).animate(css, speed, $.bez(bezierEasing)
}, timer);
}
animateEl('#clock', {'marginTop': '-20px' }, 'slow', 100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100, 600);