Develop Reference

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

jQuery Slideup and Fadein Effect at the same Time

I'm learning new stuff with jQuery here and I have seen a effect that I like link here
Meet my Team section. As you can see if you scroll down the circle slidesup and fades in at the same time. I tried to replicate that effect. Here's my jsfiddle
$(window).on("scroll", function() {
if ($(window).scrollTop() >= $('#thumbnails-cont').offset().top-$(window).height()) {
$("#thumbnails img").animate({opacity: 1, bottom: 0})
}
});

You have to work with the queue property to play animations simultaneously.
Working fiddle: Here
Basic code:
$(function() {
$(".thumbnail").animate({ opacity: 1 }, { duration: 1200, queue: false });
$(".thumbnail").animate({ "margin-top": "0px" }, { duration: 1200, queue: false });
});
Read this for more information about the animation function in jQuery.
I hope I could help you a bit :)

Animated arrow(s)

I'm using the following code to animate a div class arrow;
function animUp() {
$(".arrow").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
Which works great and animates the arrow as intended. I've then added the class 'arrow' to another div with an arrow in to animate and they both stop animate down, long pause, animate up, long pause, animate down etc. Rather than the smooth animation of one arrow.
I've also tried having arrow and arrow2 and combining them in the script like this;
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
With the same result as above. What else can I try to get them both animating smoothly?
jsFiddle - My html structure is using bootstrap

animations are added to a queue by default in jQuery to avoid queueing you should do the following:
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
notice how instead of just passing in "slow" we now use an object
the following is from the jQuery site :: http://api.jquery.com/animate/
queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.

Javascript glow/pulsate effect to stop on click

I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it.
<script type="text/javascript">
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}
pulsate();
});
</script>
So basically, I just need to know what I need to add here so that the effect stops once it has been clicked.
If the same link is clicked again, the revealed section of the page will hide - is it too much trouble to make the effect start again after a second click?
I look forward to an answer from you good people.
Scott.

Simply bind to the click event and call stop(). You should also ensure that the opacity has been restored to 1:
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
//Restore opacity to 1
$(this).animate({ opacity: 1 }, 1200, 'linear');
//Stop all animations
$(this).stop();
});
}
pulsate();
});
Here's a working jsFiddle.

The solution is pretty simple. Have your pulsate() function make sure that .pulsate doesn't have the class stop before doing its thing. If it does have that class, then the pulsate() function will simply animate the link back to full opacity, but not continue the pulsating.
James' example works as well, but I prefer my approach because his way binds the click event to .pulsate over and over again. This kind of thing may cause problems depending on what the rest of your page is doing.
Live example: http://jsfiddle.net/2f9ZU/
function pulsate() {
var pulser = $(".pulsate");
if(!pulser.hasClass('stop')){
pulser.animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}else{
pulser.animate({opacity:1},1200)
.removeClass('stop');
}
}
$(document).ready(function() {
pulsate();
$('a').click(function(){
$('.pulsate').addClass('stop');
});
});

How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations.
I need to do something like this...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
but to run those two at the same time. The only thing I could think of would be using setTimeout once for each animation, but I don't think it is the best solution.

yes there is!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});

That would run simultaneously yes.
what if you wanted to run two animations on the same element simultaneously ?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
This ends up queuing the animations.
to get to run them simultaneously you would use only one line.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Is there any other way to run two different animation on the same element simultaneously ?

I believe I found the solution in the jQuery documentation:
Animates all paragraph to a left style
of 50 and opacity of 1 (opaque,
visible), completing the animation
within 500 milliseconds. It also will
do it outside the queue, meaning it
will automatically start without
waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
simply add: queue: false.

If you run the above as they are, they will appear to run simultaenously.
Here's some test code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
To insure the animations are indeed running at the same time use:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
Further animations can be added to the 'my-animation' queue and all can be initiated provided the last animation dequeue's them.
Cheers,
Anthony

See this brilliant blog post about animating values in objects.. you can then use the values to animate whatever you like, 100% simultaneously!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
I've used it like this to slide in/out:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}

Posting my answer to help someone, the top rated answer didn't solve my qualm.
When I implemented the following [from the top answer], my vertical scroll animation just jittered back and forth:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
I referred to: W3 Schools Set Interval and it solved my issue, namely the 'Syntax' section:
setInterval(function, milliseconds, param1, param2, ...)
Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.
The long and short, here's my code, if you want to understand why it works, read the link or analyse the interval expected parameters:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Where 'autoScroll' is:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Happy coding!