Develop Reference

Javascript Accordian

I have a simple accordion working, except for one thing. I would like to be able to re-click the same accordion item again, and be able to set height to '0'.
Currently, the open accordion item closes when I click a different accordion item, which is exactly what I want to do — but I also want the ability to re-click the open accordion item and have that one close, when clicked. See working example below:
https://codepen.io/celli/pen/BaNLJWb
// set heights to 0
gsap.set('.content', {
height: 0
});
// click function
$('.accordianItem').click(function() {
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {
duration: .25,
height: 0
});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {
duration: .25,
height: "auto"
});
$(this).addClass('on');
});
What code can I add to add this extra functionality?

I have modified your code by adding another if that checks if the element clicked has 'on' class already. It should now work as you intended it to (hide when the user clicks on the already opened header).
// set heights to 0
gsap.set('.content', {height:0});
// click function
$('.accordianItem').click(function() {
if($(this).hasClass("on")){
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
else{
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
$(this).addClass('on');
}
});

You can do this much more simply than how you're currently doing it:
// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});
// Set the timeline to its end state
tl.progress(1);
// Toggle the timeline's direction
$('.accordianItem').click(function() {
tl.reversed() ? tl.play() : tl.reverse();
});
Demo
I highly recommend checking out the GreenSock forums. They're super useful and you can get quick help from people who are experts in GSAP and web animation :)

Bootstrap Modal Fade Out Animation

I've added some basic animation to the closing of the modal box, so that it zooms out to an element:
$(function(){
var $modal = $('.modal');
$modal.on('hide', function () {
if (!$modal.isAnimating) {
// $('.modal-backdrop.in').fadeTo(250, 0); // fade out backdrop
var $target = $('#zoomout-target');
var pos = $target.offset();
pos.top -= $(window).scrollTop();
pos.left -= $(window).scrollLeft();
$modal.css({top: pos.top, left: pos.left, transform: 'scale(0.1, 0.1)', opacity: 0});
$modal.isAnimating = true;
setTimeout(function(){
$modal.modal('hide');
$modal.isAnimating = false;
}, 750);
return false;
}
$modal.css({top: '', left: '', transform: '', opacity: ''});
});
});
The problem is that the backdrop "hides" the target element to which the modal box zooms out.
So I added the commented line above $('.modal-backdrop.in').fadeTo(250, 0); which fades out the backdrop very nicely, but it looks like I'm missing something because then the page freezes.
It seems like the backdrop is still on, capturing all of the mouse events, etc, even though transparent. So the backdrop is not visible, but is making the page unusable.
How can I get rid of the backdrop at the end of the fadeTo animation?
EDIT:
I noticed that the problem is with the .modal-backdrop and .modal-scrollable overlays, so this snippet instead of the offensive one resolves the issue, but there's has to be a cleaner solution IMO:
$('.modal-backdrop.in').fadeOut(600, function(){
$('body').removeClass('modal-open');
$('.modal-backdrop').hide();
$('.modal-scrollable').hide();
}); // fade out backdrop
I'm using Bootstrap 2.3.2 and Bootstrap Modal 2.2.5
TIA

Velocity.js leaving text artefacts on fade out

I am struggling to see why this leaves slight text fragments at the top of where an element has had the HTML replaced and then faded back in. This is the code:
$('.current-station-services li').on('click', function() {
$(this).find('.status').velocity({
opacity: 0
},{
duration: 100,
complete: function() {
$(this).html(data.test);
$(this).velocity({
opacity: 1
})
}
});
});
Here is an image also of the output (artefact above the 'yo!'):

This is a browser issue, not Velocity. Feel free to submit a bug report to webkit/gecko.

jQuery rebind function

I want to have a div that animates the currently active image out of the view and instead animates in another image. There are several of these divs, and each one should have the same basic functionality but linked to different images. The problem I'm having is that you can click many of the divs before the animation is complete, which fires the other animations at the same time. My goal is to only be able to fire one animation at a time, and when the animation finishes you're able to fire the next animation. I've tried using unbind which works OK but then I'd have to rebind it later and I don't know how to do this. I'm really a jQuery noob so I would greatly apreciate an answer. Thanks!
My code:
$('.div1').click(function clickevent() {
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
$('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
$('div2, .div3').unbind('click', clickevent);
});
I have two other codeblocks for .div2 and .div3 which look the same but with different classes in different places. Is there any way to make the images finish their animation before being able to animate again? Thanks.

Is this what you need:
var canAnimate = true;
$('.div1').click(function clickevent() {
// these 4 lines have to be in all code blocks (ie. for .div2 and .div3)
if (! canAnimate) {
return;
}
canAnimate = false;
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500, function() {
canAnimate = true; // this should also be included for .div2 and .div3 code blocks
});
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
});

I think queue() will append the animations but not stop them, so if you click 10 times on the images, the click handler will animate it 10 times but one after another. I guess you want only animate the images when no image is currenty animated so you can use:
$('.div1').click(function clickevent() {
// When no image is currently animated then perform the animation
if($j('.img1, .img2, .img3').is(':animated') == false)
{
$('.img2, .img3').animate({
opacity: 0.1,
left: 600
}, 1000, function() {
$('.img1').animate({
opacity: 1,
left: 0
}, 500);
});
$(this).addClass("active");
$('.div2, div3').removeClass("active");
} else {
// There is currently an animation runnig, do nothing
}
});
See this for more information: http://api.jquery.com/animated-selector/
You should also get some information about caching of selection results.

can jquery toggle the original css(style.css) value and the new value(set in the .animate{})?

erm...can jquery toggle the original css(style.css) value and the new value(set in the .animation{})?
$(function() {
$('a.maximize').click(function() {
$($(this).attr('href')).animate({
position: "absolute",
top: 0,
left: 0,
height: '99.5%',
width: '99.5%',
opacity: 1,
},1000)
});
});
this is the jquery code i have now,but how to toggle the a href target to the new value(code above)
or set the .animate{} change after click,and change back the previous .animate{} after click again.
example: the same button,
but first time click, change it to width height 100%,
but the second time click on the same button, change them back to the width height 50%
the third time change to width height 100% and so on..

Yes, you can do that with .toggle()
like this:
$('selector').toggle(func1,func2/*,func3, so on..*/)
then define your functions
function func1(){
// do something...
}
function func2(){
// do something...
}
the functions inside the toggle are executed from first function to last then back to start.
or you can also
$('selector').toggle(function(){...},function(){...}/*,function(){...}, so on..*/)
scroll down to the bottom of the demo here to see what I mean.
I made also a quick demo here.