Develop Reference

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.

How do I remove fadeIn?

I'm working on a simple landing page. I have a jquery file but i dont really know how to hide the fade. I mean i just want to animate the 5 image without fade. What do u think where is the probelm ?
http://yourjavascript.com/13873144111/jquery.js - jquery
$(document).ready(function() {
$(".start").click(function() {
$.when($('.start2').fadeIn(2000)).done(function() {
$.when($('.start3').fadeIn(2000)).done(function() {
$.when($('.start4').fadeIn(2000)).done(function() {
$.when($('.start5').fadeIn(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").fadeIn(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});

Well, there's something you don't understand, you're actually using the fadeIn animation, so to 'Hide' it, like you asked you have to actually not use it. If you want the stuffs to appear with no fading, you can either use slideDown, your own .animate to create custom animation or show instead of fadeIn.
So to simply use slideDown, you would do this.
<script type="text/javascript">
$(document).ready(function()
{
$(".start").click(function()
{
$.when($('.start2').slideDown(2000)).done(function() {
$.when($('.start3').slideDown(2000)).done(function() {
$.when($('.start4').slideDown(2000)).done(function() {
$.when($('.start5').slideDown(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").slideDown(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
</script>
And maybe use slideUp instead of hide

How do I add smooth transitions to this script

How do I add smooth transitions when display block and hide:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').css({ display: "block" });
$(this).find('.boxDisc').css({ display: "block" });
$(".userBox").mouseout(function () {
$(this).find('.inBox').css('display', 'none');
$(this).find('.boxDisc').css('display', 'none');
});
});
});
Because right now it's instant and doesn't look good.
Thanks!

One way is to use jQuery fading methods:
$(document).ready(function () {
$(".userBox").mouseover(function () {
$(this).find('.inBox').stop().fadeIn('fast');
$(this).find('.boxDisc').stop().fadeIn('fast');
$(".userBox").mouseout(function () {
$(this).find('.inBox').stop().fadeOut('fast');
$(this).find('.boxDisc').stop().fadeOut('fast');
});
});
});
Example:
http://jsfiddle.net/L9t4J/

You could try fadeIn and fadeOut:
$(document).ready(function(){
$(".userBox").mouseover(function () {
$(this).find('.inBox').fadeIn(500);
$(this).find('.boxDisc').fadeIn(500);
$(".userBox").mouseout(function () {
$(this).find('.inBox').fadeOut(500);
$(this).find('.boxDisc').fadeOut(500);
});
});
});

using jQuery methods such as show('slow'), hide('slow'), toggle('slow') will make transitions smoother.
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/
Other useful, playful and great methods are .animate() and jQuery ui's slide effects (https://api.jqueryui.com/slide-effect/)
Cheers!
Edit: I was going to write about the fadeIn and fadeOut methods too. But Maurice Perry was quicker to point those out with an example :)

How to hide class first and show only on hover in jQuery?

I have following toggling script:
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
});
But this works after i first hover that div.
How should I remove all .edit_bg classes from divs on start and be able to show them on hover?

After the on function just do removeClass.
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
}).removeClass('edit_bg');

I understand what you are trying to achieve using Javascript/jQuery, but you can achieve it simply using css:
.edit_bg
{
background-color: blue;
}
.edit_bg:hover
{
background-color: red;
}
Look, ma! No javascript! http://jsfiddle.net/adrianonantua/rv9ht/

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