I'm currently developing a unique slider that includes a dynamic video element. With each slide transition, a new video is added to the DOM while the previous one is removed. To achieve this effect, I am utilizing CSS transitions along with a specific class to animate the video's position. Here is what I aim for the function to do:
1) Apply a CSS class to the old video
2) Remove or detach the old video using either remove() or detach()
3) Apply a CSS class to the new video
The code snippet I have implemented so far is as follows:
function videoDetach() {
// Restore loading spinner
$('.spinnerMsg').removeClass("nospin");
// Move video out of view and bring in the next one
$('#bgIn video:first').removeClass( function (){
$('#bgIn video:first').addClass("outview");
setTimeout(function(){
$('#bgIn video:first').detach();
$('#bgIn video:last').addClass("inview");
},250);
});
}
While this code works correctly, I am unsure about its safety and correctness. What would be the best practice for achieving this task effectively?
In regards to choosing between detach() and remove(), since each video will be re-inserted as the slider repeats, detach() seems like the suitable option. However, I am uncertain about storing multiple videos in the DOM with the same id, and whether using remove(); would require users to download the entire video again.
Your feedback on this matter would be highly appreciated.
UPDATE
After making adjustments based on T.J's response due to some instability issues such as detaching all videos or permitting duplicates, the revised code now appears as follows:
function videoDetach() {
// Restore loading spinner
$('.spinnerMsg').removeClass("nospin");
// Move current video out of view
$('#bgIn video').addClass("outview");
setTimeout(function(){
$('#bgIn video.outview').detach(); // Detach the old video
$('#bgIn video').addClass("inview"); // Bring the new video into view
},250);
}