Develop Reference

Wait for one animation to finish before starting another

I have a mouseenter animation on a footer and also a mouse leave animation that just slides it abit, the issue im having is if you mouse enter then mouseleave multiple times quickly the animations que and run over and over even if the element is no longer beign used.
How do I wait for the mouse over to run before it then recognises the mouse leave please.
Many thansk for any help
David
$(document).ready(function () {
$("footer").mouseenter(function () {
$("footer").animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").animate({ bottom: '-=62px' }, 500);
});
});

Try adding stop() to your animate functions. It stops the currently-running animation on the selected element.
$("footer").mouseenter(function () {
$("footer").stop().animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").stop().animate({ bottom: '-=62px' }, 500);
});

Stop/reverse animation on mouse off (baraja jquery plugin)

I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?

this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E

How to add <a href links into tooltip and be able to mouseover and click on it? for jQuery UI 1.10

I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.
$(function () {
$(document).tooltip({
track: false,
show: {
effect: "slideDown",
delay: 20
},
hide: {
effect: "explode",
delay: 5
}
});
})
Documentation:
http://api.jqueryui.com/tooltip/#option-position
Thanks,
Will

jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeIn(250);
},
function () {
$(this).fadeOut("250", function () {
$(this).remove();
})
}
);
}
This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:
/*hide: {
effect: "explode",
delay: 5
},*/
You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:
content: function () {
return $(this).prop('title');
},
See here for a fiddle

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

Jquery Cycle Slider - Quick Clicks Break Slider

I've created somewhat of a complicated slider with jquery Cycle. You can see it running perfectly here
However, when you click it a bunch of times (before the slide has finished its transition), it starts to go wacky and even hides the text..
Here is my code:
$('#dmzSlideHolder').cycle({
fx: 'uncover',
pager: '#slideNav',
timeout: '8000',
before: function() {
var dmzTitle = $('.dmzSlideTitle p', this).html() + '<span class="arrow">»</span>';
$('#slideTitle').stop().animate({width: 1}, 1000);
$('#slideTitle p').stop().html(dmzTitle).hide().delay(2000).slideDown();
},
after: function() {
var dmzTitle = $('.dmzSlideTitle', this);
$('#slideTitle').stop().animate({width: 575}, 1000);
},
});
Any ideas? I thought .stop() would remedy this, but it didnt..

Figured it out. Had to set the .slideUp and .slidedown to happen on the callback of .animate()