Jquery 如何在加载对象时显示文本

Jquery 如何在加载对象时显示文本,jquery,css,html,Jquery,Css,Html,我试图在加载html对象(视频)时显示一些文本。以前有一个备用属性,但现在不推荐使用。在加载对象时,我很难让这个简单的单词显示出来。发生的情况是,onclick,单词Loading变得可见,然后在加载对象时消失。有人知道一个快速的解决方案吗 HTML: jquery: $('#vidcontainer').click(function() { $('#vidcontainer img').fadeOut('slow'); $('#vidcontainer').ht

我试图在加载html对象(视频)时显示一些文本。以前有一个备用属性,但现在不推荐使用。在加载对象时,我很难让这个简单的单词显示出来。发生的情况是,onclick,单词Loading变得可见,然后在加载对象时消失。有人知道一个快速的解决方案吗

HTML:

jquery:

$('#vidcontainer').click(function() {
        $('#vidcontainer img').fadeOut('slow');
        $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>");
        brightcove.createExperiences();
});    
$('#vidcontainer')。单击(函数(){
$('#vidcontainer img').fadeOut('slow');
$('#vidcontainer').html(“”);
brightcove.createExperiences();
});    

您可以开始将对象加载到隐藏/零不透明度容器中,并在视频准备好播放后过渡到视频


实际上,可能您的问题是您正在覆盖
#vidcontainer
div的内容,因此图像和加载标签会立即被销毁?

在淡出回调中创建对象如何:

$('#vidcontainer').click(function() {
    $('#vidcontainer img').fadeOut('slow', function() {
        $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>");
        brightcove.createExperiences();
    });
});
$('#vidcontainer')。单击(函数(){
$('#vidcontainer img').fadeOut('slow',function(){
$('#vidcontainer').html(“”);
brightcove.createExperiences();
});
});

但我不确定这是否是您想要的,这个问题对我来说不够清楚

它出了问题,因为您正在使用
.html()
函数清除
\vidcontainer
中的所有内容。您不需要在淡出完成后设置内容,而是在单击时立即设置内容,因此,img disapear和fadeOut效果在不存在的元素上不起作用。我正在使用此结构,但我仍在解决这个问题。我所做的是使用代码非常缓慢地淡入图像(4000),然后使用$('#vidcontainer').append而不是$('#vidcontainer').html。非常感谢。我创造了两个小提琴来比较和。。。如您所见,它使用
.html()
$('#vidcontainer').click(function() {
        $('#vidcontainer img').fadeOut('slow');
        $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>");
        brightcove.createExperiences();
});    
$('#vidcontainer').click(function() {
    $('#vidcontainer img').fadeOut('slow', function() {
        $('#vidcontainer').html("<object id='openingVideo' class='BrightcoveExperience'><param name='bgcolor' value='#FFFFFF' /><param name='width' value='480' /><param name='height' value='300' /><param name='playerID' value='xxx' /><param name='playerKey' value='xxx' /><param name='isVid' value='true' /><param name='isUI' value='true' /><param name='dynamicStreaming' value='true' /><param name='autoStart' value='true' /><param name='@videoPlayer' value='xxx' /></object>");
        brightcove.createExperiences();
    });
});