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.

jQuery animate back when clicked anywhere on the page

<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.

well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});

Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});

Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/

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 :)

jquery animate then stop

Struggling a bit with jquery animate.
At the moment, if I continue to click button, clearly it shifts the object to the right 50px every time
$( ".button" ).click(function() {
$( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);
Is there a way of ensuring that one click moves it once, then a second click does not move it?
ie. a rule that moves it to right:50px and thats it, rather than + 50px?
Any assistance hugely appreciated!!

Use .one()
$( ".button" ).one('click',function() {
Fiddle Demo

You can use one():
$(".button").one('click', function () {
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
});
});
or I'd suggest you to disable the button to let your users know about your intention here:
$(".button").click(function () {
var $this = $(this);
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
$this.prop("disabled",true);
});
});

jQuery - Animate on hover

I know this is likely to be closed as a duplicate, but still I didn't manage to find an answer to my problem in all the similar questions.
I want to animate() an element on my page (through jQuery, you had guessed) on mouse hover. What I did was:
$('blockquote').hover(function() {
console.log($(this));
$(this).animate({textSize: '+=10px'}, 500);
}, function() {
$(this).animate({textSize: '-=10px'}, 500);
});
The console.log logs this:
[blockquote#daily_quote, context: blockquote#daily_quote, jquery: "1.9.1", constructor: function, init: function, selector: ""…]
Both functions inside hover get called, $(this) gets logged but nothing animates.

Use fontSize:
$('blockquote').hover(function() {
// console.log($(this));
$(this).animate({fontSize: '+=10px'}, 500);
}, function() {
$(this).animate({fontSize: '-=10px'}, 500);
});

This may be help you.
$('blockquote').hover(function() {
$(this).animate({left: '+=10px'}, 700);
}, function() {
$(this).animate({left: '-=10px'}, 700);
});
you can use any property instead of left