We Keep Coding

How do I cap the slider so that my next and prev buttons don't scroll past the content into whitespace?

I've created a fiddle to demonstrate my question. If you continue to hit prev and next the slider bar keeps sliding even past the content.
$('#next').click(function() {
$('#sliderWrapper').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#prev').click(function() {
$('#sliderWrapper').animate({
marginLeft: "+=200px"
}, "fast");
});
I assume I need an if statement something like
if (current.width+totalScrolled < slider.width)
{
$('#sliderWrapper').animate({
marginLeft: "+=200px"
}, "fast");
}
else
{
[soemthing like set.scrollRight = max]
}
and again to keep track of where you are so you don't scroll back too far.
Even a solution that brings you back to the beginning would be a great way to solve this. I just help with logic.

Here are the required if statements:
$('#next').click(function() {
if($('#sliderWrapper').css("margin-left").replace("px", "")*-1 < $("#imageSlider").width()){
$('#sliderWrapper').animate({
marginLeft: "-=200px"
}, "fast");
}
});
$('#prev').click(function() {
if($('#sliderWrapper').css("margin-left").replace("px", "") < 0){
$('#sliderWrapper').animate({
marginLeft: "+=200px"
}, "fast");
}
});
I also made some improvements to the css. At least, I think they are improvements, feel free to ignore them. The can be found here. Set the width of the slider to anyting, I just set it to 400px for testing.

jQuery Chaining animation one after another

I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});

You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});

This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.

You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});

JQuery - Mouseleave setTimeout Error

i'm currently trying to sort out a problem with the following script. When you hover over a certain area it should make the div appear pretty much instantly, then when you leave that area it should disappear after a set amount of time.
This all works like a charm but the problem is if you leave the browser page frame with the mouse after hovering over it, it bodges up and the div wont appear when you hover over it anymore.
Any help would be greatly appreciated, thank you
$('.loginHider').mouseenter(function(){
$('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
}).mouseleave(function(){
setTimeout(function() {
$('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
}, 1200);
});
~Matt

Try
$('.loginHider').mouseenter(function () {
//clear the existing timer
clearTimeout($(this).data('mouseTimer'))
$('.loginBar').stop(true, true).animate({
marginTop: '0px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '20px'
}, 150);
}).mouseleave(function () {
var timer = setTimeout(function () {
$('.loginBar').stop(true, true).animate({
marginTop: '-50px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '-30px'
}, 150);
}, 1200);
$(this).data('mouseTimer', timer);
});

jQuery animate() is running late

I have a script that animated my image on the header. Is shrinks it when user scrolls down and enlarges it when user reaches the top. Here it is:
function headerScroll() {
$(window).scroll(function() {
if($(document).scrollTop() != 0) {
$('#headerContainer').addClass('smaller');
$('#header img').animate({
height: '170px',
left: '414px',
top: '10px'
},200);
} else if($(document).scrollTop() < 100) {
$('#header img').animate({
height: '307px',
left: '361px',
top: 0
},200, function() {
$('#headerContainer').removeClass('smaller');
});
}
});
}
Problem is - sometimes (not always) secound animation doesn't run for a while. It sometimes wait a few secounds. How can I prevent it?
edit: when I added alert('test') either before or after animate, it ran well-timed.

Use: $('#header img').animate().stop().animate(....
Hope is work

Jquery animation looping

I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.

try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/

Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.

Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});