Response title
This is preview!
Better code?
in Using jQuery
•
9 years ago
I am pretty new to jquery/js and would love some feedback on how to better write my code. I just wrote the following and would think there are ways to consolidate a bit. Specifically, the variable and animations inside the hover functions?
Any feedback would be great! Thanks a lot!
// Colors
var colorWhite = "#ffffff";
var colorTeal = "#72c29b";
var tabWidthClosed = 25;
var tabWidthOpen = 200;
// General set up...
$(".thumbnail > a > .label-tab").width(tabWidthClosed);
$(".thumbnail > a > .label-tab").css("background-color", colorTeal);
$(".thumbnail > a > .label-tab > *").css("opacity", 0);
$(".thumbnail > a").hover(
function (evt) {
var overlay = $(this).find(".thumb-overlay");
var label = $(this).find(".label-tab");
var copy = $(this).find(".label-tab > *");
$(overlay).animate({ opacity:0 }, 250, function() {});
$(label).animate({ "background-color":colorWhite, width:tabWidthOpen }, 250, function() {});
$(copy).animate({ opacity:1 }, 250, function() {});
},
function () {
var overlay = $(this).find(".thumb-overlay");
var label = $(this).find(".label-tab");
var copy = $(this).find(".label-tab > *");
$(overlay).animate({ opacity:1 }, 250, function() {});
$(label).animate({ "background-color":colorTeal, width:tabWidthClosed }, 250, function() {});
$(copy).animate({ opacity:0 }, 250, function() {});
}
);
1