I'm grappling with a challenge and need some assistance. Despite my efforts, I can't pinpoint the exact source of the issue...
The problem lies within an interactive graphic designed for Chrome users. This graphic includes variables that change upon clicking different buttons in the center, triggering animated functions to resize the surrounding banks.
Despite adding 'px' to the animate functions as advised, there's no change. Interestingly, a basic rollover function using the same animate feature works perfectly, but the advanced one utilizing variables doesn't.
If anyone identifies any issues within the jQuery code hindering its functionality, please do let me know. Any additional information you require will be provided promptly. Thank you.
Below is the jQuery code:
$(document).ready(function() {
var title = 0;
$(".bank").mousemove(function(e) {
$(this).find('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');
});
$(".bank").mouseout(function() {
$(this).find('.tooltip').css('display', 'none');
});
var resize = function() {
$('.bank').each(function() {
bankName = $(this).attr('class').split(' ')[1];
var bankSize = window[bankName] * 15;
var bankNameMargin = bankSize / 2 - bankSize;
$('.banks .' + bankName).animate({
width: bankSize + 'px',
height: bankSize + 'px',
marginLeft: bankNameMargin + 'px',
marginTop: bankNameMargin + 'px'
}, 300);
if (bankSize == 0) {
$('.banks .' + bankName).animate({
opacity: '0',
width: '70px',
height: '70px',
marginLeft: '-35px',
marginTop: '-35px'
}, 300, "linear", function() {
$(this).css({
"opacity": "1",
"width": "0px",
"height": "0px",
"marginLeft": "0px",
"marginTop": "0px"
});
});
}
});
}
resize();
$(".bank").mouseenter(function() {
$(this).animate({
width: '+=10',
height: '+=10',
marginLeft: '-=5',
marginTop: '-=5'
}, 200);
});
$(".bank").mouseleave(function() {
$(this).animate({
width: '-=10',
height: '-=10',
marginLeft: '+=5',
marginTop: '+=5'
}, 200);
});
...
});