jquery - 使 div 淡出的最简单方法

Question

这可能是因为我没有得到足够的睡眠，但我就是想不通。我正在尝试制作一个页面，其中您有多个视频，然后顶部有一个 div 突然出现并随着视频加载而消失，所有这些onClick。我今天早些时候有它，但现在它不工作了。函数的部分是

$('#hh').animate({
        opacity: 1
    }, 0, function() {
            myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
     $('#hh').fadeOut(400);                                                        
    });

那么，为什么这不起作用？

Answer 1

$('#hh').show();
myVideo.src = videos[numb];
myVideo.load();
myVideo.play();
$('#hh').fadeOut(400);                                                      

Answer 2

.fadeOut 是一种让事物淡出的非常简单的方法。

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

.fadeOut() 方法动画匹配元素的不透明度。一旦不透明度达到 0，显示样式属性设置为无，因此元素不再影响页面的布局。

持续时间以毫秒为单位；较高的值表示较慢的动画，而不是较快的动画。可以提供字符串 'fast' 和 'slow' 分别表示 200 和 600 毫秒的持续时间。如果提供了任何其他字符串，或者如果省略了持续时间参数，则使用 400 毫秒的默认持续时间。

Answer 3

$('TARGET').fadeOut(300); // TARGET is any valid selector

消退（）

   $('#hh').show('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

你也可以使用

   $('#hh').fadeIn('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

淡入（）

Answer 4

您可以将代码替换为，

    $('#hh').fadeIn('slow', function() {

                   // Call Back Function 

                   myVideo.src = videos[numb];
                   myVideo.load();
                   myVideo.play();
                   $('#hh').fadeOut('slow');                            
        }                            
    });

但是有一件事我还没有理解，那就是为什么你要设置 opacity 0 之后myVideo.play();

Answer 5

您可以使用fadeIn，在回调中更改您的视频src，加载和播放，最后fadeOut。它应该工作

$('#hh').fadeIn(400, function () {
  myVideo.src = videos[numb];
  myVideo.load();
  myVideo.play();
  $(this).fadeOut(400);    
});