javascript - 用 jQuery 清空 div 然后把它放回去？

Question

我有一个带有视频的 div，这样当我单击播放按钮 (.video-play-container) 时，视频会淡入，然后当我单击关闭按钮 (.close-video)，视频淡出。问题是当视频淡出时，它仍然在后台播放。因此，我用这一行 ('$(.youtube-player').attr('src', '');) 清空了 src。但是，如果用户不需要再次观看视频，这会很好。但如果他想重新打开视频，src 现在是空的，因此他无法看到视频。在取出 src 后，如何恢复它以便用户可以多次观看该视频？

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});

编辑:更新代码

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑:更新代码 2

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', '');
    $('.youtube-player').attr('src', src);
});

编辑:更新代码 3

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000, function() {
        $('.youtube-player').attr('src', '');
    });
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑:更新代码 4(最终)

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000, function() {
        $('.youtube-player').attr('src', '');
        $('.youtube-player').attr('src', src);
    });
    $('.video-play-container').show().fadeIn(2000);
});

Answer 1

这几乎是 XY problem 的定义，但如果您坚持...要保存和恢复属性，

var src;
src = $('.youtube-player').attr('src');
$('.youtube-player').attr('src', '');
// do something else
$('.youtube-player').attr('src', src);

要保存和恢复标签的内容，

var html;
html = $('.youtube-player').html();
$('.youtube-player').empty();
// do something else
$('.youtube-player').html(html)

编辑:

• Why don't you kill the player at the end of the fade-out?
• I did that (you can see in the updated code above) but it still looks like it has that flicker

你没有这样做。 hide(2000) 是异步的。它将把淡入淡出放入队列中，然后立即清除 src 并将其立即放回。因此，当视频消失然后开始加载时，会出现闪烁，所有这些都在淡入淡出完成之前进行。您想要在 hide 上使用动画结束回调:

$('.overlay').fadeOut(2000, function() {
  $('.youtube-player').attr('src', '');
  // ...
});