We Keep Coding

scrollTop not working correctly with .animate

I have a Div containing overflow text that I would like to scroll through with the click of a corresponding button. It's set to scroll 100 pixels in either direction. The function works fine when I use it don't use jQuery .animate.
$(function() {
$( "#upBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()-100);
});
$( "#downBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()+100);
});
But once I add .animate, I can only click the button once in either direction. It won't let me scroll down past the first 100 pixels.
$("#scroll").animate({ scrollTop: "100px" });
Any suggestions? I put together a codepen.

Yes that is correct behavior!
Why?
Because that is already at 100px so it doesn't scroll further than that.
What should be done:
You can get the current scroll top position and add 100px to it. Like below:
$("#scroll").animate({ scrollTop: $("#scroll").scrollTop() + 100 });
And same goes for other way up.

Select Specific Elements With The Same Class In JQuery

I'm trying to create a select state using two div's positioned on top each other. One is positioned relatively and one is positioned absolutely with a bottom position of -200px. On Click of the relative div, the absolutely positioned div will slide in with a message of "success".
I have this working right now, but I need to go a little more in depth by removing the "success" div if the user decides that they want to change their selection. Also right now, when I click one div, all the divs show the "success" state. I want to fix this without touching the html/css.
Here is the JS fiddle.
http://jsfiddle.net/LSan3/
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
Thanks !

I think this is what you want:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').stop().animate({
bottom: "-100px"
}, 300 );
$(this).find('.inner-div').stop().animate({
bottom: "0px"
}, 300 );
});
});
http://jsfiddle.net/LSan3/3/
So in the click function we first hide all 'inner-divs' then find and show the one relative to 'this' - 'this' being the 'main-div' that was clicked.
Let me know if this is what you wanted to achieve.
EDIT: Also note I have added .stop() which will make sure your animation doesnt repeat multiple times if they user clicks the 'main-div' rapidly

Try:
$(document).ready(function () {
$('.main-div').click(function () {
$('.inner-div').animate({
bottom: "-100px"
}, 0);
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300);
});
});
jsFiddle example

try the code given below:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({bottom: "-1-0px"}, 300 );
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
I think this may help you.

Move div to left on click and back to regular position on click

I have a navigation menu with a drop down on click and once the "resources" link is clicked I would like to have it moved to the left in the middle of the container div then once the viewer moves the mouse out of the resources link it goes back to it's regular position.
I tried to add these lines to my mini script//
jQuery( "#RXCLICK" ).animate({
left: "+=50"
});
but nothing happens.
Here's a fiddle.
My question is,
Why exactly doesn't the animation work?
What am I doing wrong?
Please help.

Did you want to animate the round ball instead of the menu?
You either really meant:
// You used a pound to refer to an ID instead of a class...
jQuery( ".RXCLICK" ).animate({
left: "+=50"
});
Or,
// This would move the menu, not the round ball.
jQuery( ".RXMENU" ).animate({
left: "+=50"
});

return an element to its starting position after .stop() is activated

I am writting a very cool jquery plugin and I'm finding myself snagged on this last bit. basically I'm animating an element on mouseenter and mouseleave. A good example can be found in this jsbin everything works well except when you hover over the back button before the go button has finished its animation it will move the image off screen. Assuming I know the starting location of the element, is there a way to keep the element from animating past its original location even if the animation is stopped early? I need to use .stop() for the animation. Maybe this is something easy that I'm just overlooking.
Code snippet from the jsbin link:
// Start animation
$( "#go" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
$( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});

stop accepts arguments that control how the animation is left. You may want to use .stop(true, true), which jumps the animation to the end when stopping it:
$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );
...but it might be a bit jumpy.
Alternately, as you say you know where the element starts, just return it there:
$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );
...where originalPosition is an object with the properties left and top, presumably. That might be a bit jumpy as well, it depends on the specifics of your use case.
Or as, again, you have the original position, you could just animate back to that position (or forward to that position + 100px, depending).

make div appear instead of sliding to location

I have a progress bar that is supposed to go to one of six thumbnails,depending on which one you click on. It works fine in the sense that it goes to the right thumb, and does it's job. The thing is, I need it to disappear as it moves, and reappear on stopping moving. I tried using hide, but that didn't quite work. The script is
$(function(){
$("#content div:not(.control)").bind('touchstart click', function() {
$(".control").animate({ top: $(this).offset().top, height: $(this).height() });
});
});
Can someone help me find the best way to go about doing this? thanks

If i got it right, maybe this would do:
$("#content div:not(.control)").bind('touchstart click', function() {
// first, we hide .control, then do animation, then in the callback we do fadeIn
$(".control").hide().animate({
top: $(this).offset().top,
height: $(this).height()
}, function() {
$(this).fadeIn();
}
);
});