Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades out the image, but when loading the new one, it doesn't seem to fade.
Any thoughts or suggestions on how to address this?
$("#product_color_select li").on("click", function() {
var select_product_id = $(this).attr('data-value');
sd_refresh_product_form_update(select_product_id);
});
var product_color_select_first = $("#product_color_select li:first-child").attr('data-larger');
$("#larger-colour").fadeIn("slow", function() {
$('#larger-colour').addClass(product_color_select_first);
});
$("#product_color_select li").on("mouseover", function() {
var select_product_swatch = $(this).attr('data-larger');
$("#larger-colour").fadeOut("slow", function() {
$('#larger-colour').removeClass();
});
$("#larger-colour").fadeIn("slow", function() {
$('#larger-colour').addClass(select_product_swatch);
});
});#product_color_select {
width: 76%;
float: left;
}
#product_color_select li {
display: inline-block;
width: 30px;
height: 25px;
text-indent: -999999em;
cursor: pointer;
margin: 0 2px 5px 0;
}
#larger-colour {
float: right;
max-width: 86px;
width: 86px;
height: 62px;
}
/* interior colours */
#product_color_select li.eco-weave,
#larger-colour.eco-weave {
background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/eco-weave.png');
}
... (CSS rules continue as per original content)
</ul>
<div id="larger-colour" class="aubergine-dream" style="display: block;"></div>