分配多个功能，一个div我是比较新的Web开发。这个问题是通用的，但我会提出特定的用户案例。动态股利或CSS/HTML
用例1： 我在网页上有一个div元素。当页面第一次加载时，这个div运行一个小的5秒动画。我希望做的是，当这个动画结束时，我想同样的div包含一些其他的元素 - 它可能是一个图像，链接，另一个动画等 也就是说，一个容器 - 股利 - 上托管多个元素一个时间尺度。前5秒动画，然后是图像或链接。 Javascript方法能让我做什么？
用例2： 同样，我在页面中有一个div元素。现在这个div元素就像一个标签式浏览器 - 你点击不同的标签来查看不同的网页。同样，我希望这是一个“标签”分区。在用户将鼠标悬停在标签1上时，div会显示一个视频，当它悬停在标签2上时，它会在同一个div中显示另一个视频 - 即替换旧视频。这些标签可以被认为是一个看起来很喜欢的链接。
或者，首先，有没有“格”的替代做上述的事情？
感谢， SMK。
用例2解决方案 - 这是一个稍长的解决方案，但它非常灵活，可以非常容易地扩展到任意数量的选项卡
我们将把解决方案分为3个部分 - CSS，HTML和JQuery。
让我们来看看CSS部分第一
<style>
#tab_holder {
width: 350px; !important
}
#tab_holder .tabs {
float: left;
height: 20px;
padding: 5px;
border: 1px solid #eee;
border-bottom: none;
width: 50px;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
#tab_holder .tabs:hover {
background-color: #eee;
}
#tab_holder #content_holder {
width: 400px; !important
margin: 0 0 0 0;
border: 1px solid #000;
padding: 10px;
float: left;
border-radius: 0 5px 5px 5px;
}
.content {
visibility: hidden;
}
</style>
现在让我们来看看这个解决方案的HTML部分
<div id="tab_holder">
<div id="tab1" class="tabs">Video1</div>
<div id="tab2" class="tabs">Video2</div>
<div id="tab3" class="tabs">Video3</div>
<div id="content_holder">
<div id="main_content">Select a tab to see the video..</div>
</div>
</div>
<!-- These are divs in which you put your actual content.
They are always hidden -->
<div id="content1" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe>
< /div>
<div id="content2" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content3" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
你可以看到，每个标签为a div使用CSS部分中的“tabs”类。如果你需要添加一个新的标签，你所要做的就是添加一个新的div，并给出一个新的ID。例如添加第四选项卡，你可以说 -
<div id="tab4" class="tabs">Video4</div>
它是那样简单。 现在我喜欢这种方法的东西是，你可以放置内容显示在div的，而不是嵌套在jquery下。在这种情况下，我们使用div的ID content1 content2 content3
这使您可以灵活地扩展，因为您在div中输入内容并使用普通标记而不会感到困惑和放松。
这些div不可见，因为我们已将它们的可见性设置为到隐藏是CSS。
如果您添加一个新的标签div，您还必须添加一个新的内容div。
现在我们移动到JQuery的部分 -
以上的JQuery$(document).ready(function(){
/* Add the listeners. */
$("#tab1").mouseover(function(){
switch_content('content1')
});
$("#tab2").mouseover(function(){
switch_content('content2')
});
$("#tab3").mouseover(function(){
switch_content('content3')
});
});
function switch_content(name){
$("#main_content").fadeOut('fast',function(){
$("#main_content").html($("#"+name).html());
$("#main_content").fadeIn('fast');
});
}
功能是非常直截了当。每个选项卡都附有一个动作侦听器，该动作侦听器由mousover事件触发。所以，如果你用id = TAB4和用id = content4其各自的内容的div添加另一个选项卡，然后你必须在jQuery的补充说明的是：
$("#tab4").mouseover(function(){
switch_content('content4')
});
所以就变得非常容易扩展的代码。
您可以找到相关的工作演示对我website demo section
提示 -
这里是用例1
在你的HTML你需要包括5秒动画的一个例子，我persume这是一个GIF？虽然它可以是任何内容。为了这个例子，我将把它显示为一个div。
我已经使用了HTML：
<div id="example">
<div id="somecontent"> </div>
<div id="morecontent"> </div>
</div>
的CSS：
#example
{
width:500px;
height:500px;
background-color:#f00;
padding:10px;
}
#somecontent
{
width:200px;
height:200px;
background-color:#fff;
}
#morecontent
{
width:200px;
display:none;
height:200px;
background-color:#000;
}
和（使用jQuery）的JavaScript：
setTimeout(function() {
$("#somecontent").fadeOut("slow", function() {
$("#morecontent").fadeIn("slow");
});
}, 5000);
看一看这个的jsfiddle吧在行动 - http://jsfiddle.net/fntWZ/
对于用例2，它会更复杂。尝试在看看一些不同的插件，可以用这个
请在这里发表您的答案* *在其他地方展示*。 –
@DavidThomas Ive模式我的代码从jsfiddle到我的回答:) – Undefined
谢谢。较早的评论已删除。或者，如果手机会让我的话。 =/ –
答案用例帮助：1
CSS：
<style>
#myDiv {
height:0;
width:0;
position:absolute;
border:1px solid red;
}
</style>
脚本：
$(document).ready(function(){
$("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
var image = new Image();
image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
$("#myDiv").append(image);
//you can append more content by using setTimeout function
setTimeout(function(){
var anc = "<a href=\"http://stackoverflow.com\">stackoverflow</a>";
$("#myDiv").append(anc);
}, 1000);
});
});
HTML：
<div id="myDiv"></div>
'div'只是一个块元素。你可以使用'p'，或者一个部分，或者其他什么。你需要使用JavaScript来做你想做的。学习JavaScript和DOM，然后学习jQuery，然后看看jquery-ui。当然有其他选择。 –