My goal is to create a crossfade effect between two images using JavaScript (for simplicity, I have used colors in the JSFiddle example). The images must be set as backgrounds of a div element.
However, the behavior in the fiddle appears strange, as the div reverts back to its previous CSS attribute.
I am utilizing semantic-ui for this task.
Here is the link to the JSFiddle example
Below is the jQuery code snippet:
$('#button').click(function () {
$('#maindiv').transition('fade').css('background-color','red').transition('fade');
});