Develop Reference

Toggle animation on click of div?

please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});

Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/

First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})

Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.

On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});

Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!

http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});

Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});

Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.

$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});

Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.

jquery small error

i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!

This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here

Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.

Javascript Scroll Menu - MouseOver Selection not working correctly on first contact

I am currently working with a tab menu which cycles through automatically. Once I mouseover one of the tabs the "rotation" should stop on the selected tab and when I mouseout it should continue rotating from the selected tab item.
$(document).ready(function() {
$("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 1000, true);
$("#featured > ul").mouseover(function() {
$(this).tabs({ event: 'mouseover', fx: { opacity: "toggle"} }).tabs("rotate", 0);
})
$("#featured > ul").mouseout(function() {
$(this).tabs("rotate", 1000);
})
});
At the moment the when MouseOver the cycle stops but does not select the correct item, once I mouseOut then MouseOver again the functionality works perfectly!
My issue lies where on first mouseOver the code doesnt seem to be loading correctly?
Any ideas? Help will be really appreciated.
Thanks again for your time..

Try this:
$("#featured > ul").mouseover(function() {
$(this).tabs("abort");
$(this).tabs({ event: 'mouseover', fx: { opacity: "toggle"} }).tabs("rotate", 0);
$(this).tabs("select", this.id);
});

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