I am facing an issue with transitioning an ID that has a child class. My goal is to transition the ID only, without affecting the class within it. Despite going through CSS and jQuery documentation, I have been unable to achieve this. The transitions are currently applying to both elements instead of just the parent ID.
Below is the CSS code:
#outside {
background-size: 25em, 25em, auto, cover;
color: white;
cursor: default;
padding: 6em 0;
text-align: center;
}
#outside .inside {
background: rgba(52, 27, 43, 0.5);
color: white;
display: inline-block;
opacity: 0;
padding: 3em;
text-align: center;
}
Below is my attempt at implementing jQuery for the desired transition:
<script>
$(document).ready(function() {
var timeToDisplay = 4000;
var outside = $('#outside');
var urls = [
'images/image1.jpg',
'images/image2.jpg',
'images/image3.jpg'
];
var index = 0;
var transition = function() {
var url = urls[index];
outside.css('background-image', 'url("images/light-bl.svg"), url("images/light-br.svg"), url(' + url + ')');
index = index + 1;
if (index > urls.length - 1) {
index = 0;
}
};
var run = function() {
transition();
outside.fadeIn('slow', function() {
setTimeout(function() {
outside.fadeOut('slow', run);
}, timeToDisplay);
});
}
$("div.inside").css("-webkit-transition","none !important;");
$("div.inside").css("-moz-transition","none !important;");
$("div.inside").css("-ms-transition","none !important;");
$("div.inside").css("transition","none !important;");
run();
});
</script>