It may be tempting to try and animate the background of an HTML element, but unfortunately, it's not possible in the way you might expect. The background of an element is positioned directly behind it and can't easily be animated separately. While you can adjust its position using background-position:, any part of the background that extends outside the element will be clipped.
Each HTML element has its own background, and these backgrounds are separate entities that can't be smoothly animated between. jQuery animation works by altering the properties of individual elements, rather than merging backgrounds from one element to another.
To achieve a similar effect, you've already taken a smart approach by creating a <div> beneath the target element and using that for your intended background animation.
While some might view this as a workaround or "cheating," what you've done isn't necessarily a bad practice. You just need to tidy up the implementation since there are some loose ends to address.
A potential solution could involve creating a custom jQuery plugin that:
- Can be applied to lists
- Inspects the selected object's background properties (width, height, color, etc.) – you might designate the selected item with a .highlighted class
- Replaces the selected object's background with a div that shares similar properties
- When another item is clicked, moves the selection to the new item's position and copies its dimensions
The aim here would be to keep the HTML and CSS clean of any indicators that a plugin is being used, leaving the modifications to be handled solely by JavaScript.
There may already exist a jQuery plugin providing a similar effect, such as jQuery UI's .effect() option called "transfer." This effect creates a transfer element that slides and morphs from the source element to the target, which you can style with a specific class.
An example of how this can be implemented can be found in this fiddle: http://jsfiddle.net/BVaV4/22/
$(function () {
$('li').click(function () {
var $prev = $('li.selection'),
$this = $(this);
if (!$this.is('.selection')) {
$prev.removeClass('selection');
$prev.removeClass('selected');
$this.addClass('selection');
$prev.effect('transfer', {
to: '.selection',
className: "ui-effects-transfer"
}, 500, function() {
if ($this.hasClass('selection')) {
$this.addClass('selected');
}
});
}
});
});
In this script, I've incorporated selected and selection classes to prevent issues if the user clicks too quickly, ensuring a smooth transition without visual glitches. Be aware that adjusting the animation speed can impact its visibility.
For more advanced users, optimizing this animation further using jQuery.queue() to coordinate all animations and class changes in a single queue may lead to even smoother transitions, although mastering this technique may require additional experimentation.