Develop Reference

Following jQuery isn't working. Take a look

Code:
<div>
Back
<div class="outer"></div>
Next
</div>
<div>
Back
<div class="outer"></div>
Next
</div>
jQuery code:
$('.next').click(function() {
$('.next').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$('.back').next().animate({
scrollLeft: '-=150'
}, 200);
});
Error:
Basically I have more codes with the same classes as above and I want to scroll the code which is clicked. But the code written above scroll all the ".outer" on the page. Each set of the code is in different div. The inside material of the "outer" isn't provided which is scroll able.

You need to execute the code using current element context i.e. this. Also animate the siblings of parent element so traverse up using $(this).closest('div') then use .prev() or next()
$(function() {
$('.next').click(function() {
$(this).closest('div').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$(this).closest('div').next().animate({
scrollLeft: '-=150'
}, 200);
});
});

Simple Use $(this) for get current Object
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});

Don't forget to wrap your code in a document ready function.
<script>
$(document).ready(function() {
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Also using the on method is better for event binding, e.g.
<script>
$(document).ready(function() {
$('.next').on('click', function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').on('click', function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Edit:
As #GuruprasadRao pointed out, I'm assuming you are already but make sure you're using a HTML5 doctype otherwise you'll need to add type="text/javascript" to your script tag.

how to get a timeline hover animation to stop when a certain id is visible?

I am busy working on a timeline, the basic left right function of it works
the current issue I am having is that the hover function moves the timeline further than I need. I had an idea to stop the animation when the last li (#last) is visible and vise versa when the first li (#first) is visible. I think that my implementation of the jQuery might be wrong and would appreciate your assistance please. See below a JSFIDDLE and the jQuery code.
JSFIDDLE: http://jsfiddle.net/Jason1975/6nwkd2c8/84/
$(document).ready(function(){
if ($("li#last:visible")) {
stop();
} else {
$("a#next").click(function () {
$("#new").animate({
"left": "-=100px"
}, 200);
});
}
if ($("li#first:visible")) {
stop();
} else {
$("a#prev").hover(function () {
$("#new").animate({
"left": "+=100px"
}, 200);
});
}
});

There were a few things I had to change. First was your markup never had a positioning that was able to be moved. So I added position:relative; to #new.
<ul id="new" style="width: 1025px; position:relative;">
Note I also removed the translate property as you were using jQuery's animate, and translate is for CSS3 animations.
I also changed the hover functions to this:
var containerWidth = $('#container').width();
$('a#next').hover(function(){
$("#new").animate({
"left": -Math.abs(containerWidth) - 150
}, 1000);
}, function(){
$("#new").stop();
});
$('a#prev').hover(function(){
$("#new").animate({
"left": 50
}, 1000);
}, function(){
$("#new").stop();
});
And added it inside your document.ready function. I hope this helps!
Here is a working DEMO.

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

Animate an Image after hovering an item a second

after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing

Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.

Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.

jQuery effects don't work when I add a speed

I'm pretty new to jQuery (and javascript for that matter), so this is probably just something stupid I'm doing, but it's really annoying me!
All I'm trying to do is add a speed to jQuery's hide and show functions. The code I'm using is:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide();
});
}
to hide clouds when they're clicked on, and
function fadeLogo(state) {
var element=document.getElementById('logo');
if (state=='home') {
element.hide;
element.src='images/home.png';
element.show;
}
else {
element.hide;
element.src='images/webNameLogo.png';
element.show;
}
}
to hide an image, change it and then show it again. This is called by
onMouseOver=fadeLogo('home') onMouseOut=fadeLogo('logo')
This works fine, but happens instantaneously. Whenever I try to include a speed, either as 'slow', 'fast' or in milliseconds, it won't work, they just stay in their original states. Even adding hide() without a speed throws up an error in Safari's error console:
TypeError: Result of expression 'element.hide' [undefined] is not a function.
No errors are reported for the clouds, they just sit there not doing anything!
Hope someone can help!
Thanks
EDIT:
Now have this for the image change:
$(function() { //This function fades the logo to the home button on mouseover
$('.logo').hover(function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr ('src','images/home.png').fadeIn('slow');
});
}, function() {
$(this).fadeOut(
'slow',
function () {
$(this).attr('src','images/webNameLogo.png').fadeIn('slow');
});
});
});
Which fades the image out and in no problem, but doesn't change between the 2 images...
Oops, should have been #logo. Got that one working now, onto the pesky clouds...

The hide() method is used like so:
for (var i in clouds) {
$(clouds[i]).click(function() {
$(this).hide( 'slow' ); // or you can pass the milliseconds
});
}
As for the image hiding you should do something like this:
$( 'selector for your image' ).hide (
'slow',
function () {
$( this ).attr ( 'src', 'images/other.png' ).show ( 'slow' );
}
);