We Keep Coding

Can't see animation when using jQuery animate

so I know this question has been asked many times, but I could not find any answer that works for me. I've already included the jQuery Google API line before my script, and I'm pretty sure my syntax is correct as far as I know (since I'm following a tutorial video for this). I've also added a few lines of console.log() in some places and I know for sure that it is going pass the animate function and reaching the end of the code. Here is my code:
index.html (Not all, just a small part to show that I have the API included)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
javascript.js (Also not all, just the part I'm having problem with)
prepareToAttack = function () {
$("#pikachu-img").animate({
top: "-=25px"
}, 200, function () {
$("#pikachu-img").animate({
top: "+=25px"
}, 200);
});
};
Back to index.html (This is where the pikachu image is set up)
<img id="pikachu-img "src="img/pikachu.png" class="absolute" style="height: 115px; top: 40px; right: 46px">
Does anyone have any idea why I'm not seeing the animation?

Maybe the problem caused by img tag, your double quote of id stick with src.
No other problem found in my test:
NOTE: Using the style attribute in HTML is bad practice. Use plain CSS instead! Remember when an elements CSS in dynamically manipulated say whatever.style.color = "red" it will add the style attribute, then and only then it should be used.
Also thanks to HTML5 you can scrap the type="text/javascript" on your script tag.
HTML:
<img id="pikachu-img" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtDxj0kmEFUVNCUDF4G6553Hm-1w_ADcyYKhpkQf7pfsusCpHsbYpS3bQm">
CSS:
.pikachu-img {
position: absolute;
height: 115px;
top: 40px;
right: 46px;
}
JS:
$(function() {
$("#pikachu-img").animate({
top: "-=25px"
}, 2000, function() {
$("#pikachu-img").animate({
top: "+=25px"
}, 2000);
});
});

JQuery and PHP - change background image

I am trying to get a background image to change on the click of a link. In the page, there is a php function that gets all of the files (just images) from a directory and writes the following for each item:
print("
$(\"#photo" . "$curimage\").click(function(e){
e.preventDefault();
$(\"#galleryPhoto\").css(\"background-image\", \"url(images/ints/$file)\");
});
");
The entire code (for just one item) ends up looking like this:
<script type="text/javascript">
$(function(){
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
return false;
});
</script>
In the body of the page, there is another php section that does the same thing, but this time it provides the link:
print("<a id=\"photo" . "$curimage\" href=\"#\" >Change</a>");
This, of course, gives a completed link of:
<a id="photo1" href="#" >Change</a>
In addition, there is a div with the id of galleryPhoto, with the following settings in the css:
<div id='galleryPhoto'>
Main photo here
</div>
#galleryPhoto {
position: relative;
height: 300px;
width: 600px;
background-color: black;
background-image: url(../images/ints/blank.jpg);
background-size: contain;
background-repeat: no-repeat;
margin: 20px;
}
But when the link is clicked, the background image does not change. I am clueless on what I am doing wrong. I have tried so many different things that the code is probably all messed up now, but I don't know why (JQuery newbie, sorry).
Can someone please point me in the right direction?

Since your html is being generated dynamically through PHP ensure that you are using the .on function. So anytime that your html is being generated dynamically it's best to use the .on function.
So instead of using this:
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
You would use this:
$(document).on('click', '#photo1', function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});

You have to set the height and width of your #galleryPhoto div because Background image base its height and width on it's container. Unlike <img> takes the image height and width if not defined

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

Click link, div slides out, linked div slides in, click to close and reload first div

I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.

EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.

Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});

How do I get the AJAX top menu that StackOverflow has?

You know, the menu that pops up when you get to the site and you can click the 'x' to the right to remove it. What technology is this (I assume AJAX) and what terms do I need to search for to use this?

Here is the code to do it with JQuery.
Html:
<div id="message_box">
<img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
The floating message goes here
</div>
<div>
..............
other content goes here
..................
</div>
CSS:
#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}
JQuery (javascript):
$(window).scroll(function()
{
$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
//the messagebox gets scrool down with top property and gets hidden with zero opacity
$('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});
You can see a Live Demo here.
Result:

Look into jQuery.
As a side note, that box is actually static if you don't have scripts enabled, so it is not AJAX, just DOM scripting.

I know it was implemented via jQuery, but I'm not sure which plugin they used or how it's configured.