Develop Reference

is theren an alternative way to code / combine these? JS

As seen below, one function shows two things and the other function hides those two things.
Somehow they are so similar that I really want to see if there's a way I can combine them together but I just couldn't think of a way to do it.
var btns = {
filterBtn: function () {
$('.filter-btn').on('click', function () {
$('.cover').show();
$('.popup').show();
})
},
popupClose: function () {
$('.popup-x-btn').on('click', function () {
$('.cover').hide();
$('.popup').hide();
})
}
}
Anyone has any suggestions?
Or it's the best to just leave it as is?

The best refactoring I can think of would be to use jQuery.toggle(), which you can use true to show the element or false to hide it:
$('.showImage, .hideImage').on('click', function() {
$('img').toggle($(this).hasClass('showImage'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showImage">Show</button>
<button class="hideImage">Hide</button>
<br>
<img src="https://placeimg.com/250/250/any">
Or in your situation:
$('.filter-btn, .popup-x-btn').on('click', function() {
$('.cover, .popup').toggle($(this).hasClass('filter-btn'));
});

Its JS, you have so many possibilities:
function toggle(selector, dir) {
return function() {
$(selector).on('click', function() {
$('.cover')[dir]();
$('.popup')[dir]();
});
};
}
var btns = {
filterBtn: toggle('.filter-btn', 'show'),
popupClose: toggle('.popup-x-btn', 'hide'),
}
But is this better? Well, thats a personal opinion.
The important thing about JS is that you have so many ways to do everything, that the difficult thing is to find a consistent way to do things. Thats why people use more complex frameworks like react, angular, ember, vue, and so many more.

You can take advantage of jQuery's toggle method.
function toggleCoverAndPopup(showOrHide) {
$('.cover, .popup').toggle(showOrHide);
}
var btns = {
filterBtn: function() {
$('.filter-btn').on('click', function() {
toggleCoverAndPopup(true);
})
},
popupClose: function() {
$('.popup-x-btn').on('click', function() {
toggleCoverAndPopup(false);
})
}
}

you can do this with a simple if else statement.
$('.filter-btn .popup-x-btn').on('click', function() {
if ($(this).hasClass("filter-btn")) {
$('.cover').show();
$('.popup').show();
} else {
$('.cover').hide();
$('.popup').hide();
}
});

How to fade out elements on delete in MeteorJS

Take a look at: http://shopping-list.meteor.com. I want to fade out the items when they're deleted instead of having them instantly disappear, and I'm not sure how I'd implement this.
The code is at http://github.com/chintanparikh/shopping-list.
If anyone can set me on the right path, that'd be awesome.
Cheers!

Have you tried using the callback:
Template.item.events({
'click .close': function()
{
var self = this;
$(self).fadeOut('slow', function() { Items.remove(self); });
}
})
Update: added "self" as suggested by Rahul.

Try this:
Template.item.events({
'click .close': function()
{
//get parent (li) and fade it out.
$(this).parent().fadeOut();
Items.remove(this);
}
})

Getting jquery to delay after adding a class

I want a script to halt before continuing after adding a class, below are two attempts that seem to fail.
window.setTimeout($("#"+item).addClass("highlight"), 5000 );
$("#"+item).addClass("highlight").delay(5000);
Where am I going wrong here?

Another way:
$("#"+item).addClass("highlight");
setTimeout(function(){
//rest of the code
}, 5000);

You want something like:
function addClassAndDelay(item, nextMenu) {
$("#"+item).addClass("highlight");
window.setTimeout(function() { restOfCode(nextMenu); }, 5000);
}
function restOfCode(nextMenu) {
jQT.goTo('#'+nextMenu, 'slide');
}

May be you are looking for the jQuery Highlight plugin?
$("#mydiv").click(function () {
$(this).effect("highlight", {}, 3000);
});

$.noop() variable in jQuery works for one cycle, but not two

This script is for a text box to fadeIn onClick then fadeOut onClick. It works the first time. But, the second time you do it, the $.noop() variable doesn't work. Here's the link of the site I just started working on. If you click on the "music","bio", or "links" tabs twice you will see what I'm talking about. Here's the jQuery:
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function() {
$('#music-box').fadeIn(1000);
$.noop();
$('#links-top-music').click(function() {
$('#music-box').fadeOut(750);
});
});
});

Try this.
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function(evt) {
if ($('#music-box:visible').length) {
$('#music-box').fadeOut(750);
}
else {
$('#music-box').fadeIn(1000);
}
evt.preventDefault();
});
});
Demo here: http://jsfiddle.net/naveen/pfT5E/

Based on your updated comment:
$(document).ready(function() {
var buttonStatus = false;
$('#music-box').hide();
$('#links-top-music').click(function() {
if(buttonStatus) {
$('#music-box').fadeOut(750);
} else {
$('#music-box').fadeIn(1000);
}
buttonStatus = !buttonStatus;
});
});
This will toggle between visible and invisible.

jQuery Multiclasses function

I'm trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.
Could anyone advice me please how can I make it work separately for each class on hover stage:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
Thank you for your help in advance.
Dom

If the divs have only one kind of subclass each, then it's pretty simple:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
If they have multiple subclasses, you'll have to first check which class the current div belongs to and build the selector based on it.