[英]Fading one div into another
I'm having some slight problems with fading one div into another, here's my code (and test page ): 将一个div淡入另一个时,我遇到一些小问题,这是我的代码(和测试页 ):
HTML: HTML:
<div id="grid">
<div class="grid-box">
<div class="phase-1">
<img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
<div class="grid-heading">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4>Probeything 2000</h4>
<p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
</div>
<div class="grid-heading-hover">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
</div>
</div>
Javascript: Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".phase-2").hide();
});
$(function(){
$('.grid-box').hover(
function(){
$('.grid-box .phase-1').fadeOut(200, function(){
$('.grid-box .phase-2').fadeIn(200);
});
},
function(){
$('.grid-box .phase-2').fadeOut(200, function(){
$('.grid-box .phase-1').fadeIn(200);
});
}
);
});
</script>
CSS: CSS:
.phase-1 .grid-image {
width:210px;
height:220px;
overflow:hidden;
}
.phase-2 {
position:relative;
top:-220px;
}
UPDATE: I have one "working" (see test link in question). 更新:我有一个“工作”(请参阅有问题的测试链接)。 Is it possible to stop it fading to white then fading in the next phase?
是否有可能阻止它褪色为白色然后在下一阶段褪色? I want to fade the two div into each other rather than to white first.
我想将两个div彼此淡化,而不是先淡化为白色。
If you type $
on the console, it answer undefined
, so it probably was redefined by some other script. 如果在控制台上键入
$
,它将回答undefined
,因此它可能已由其他脚本重新定义。 To use $
meaning jQuery again, use the following syntax 要再次使用
$
表示jQuery,请使用以下语法
$(document).ready(function($) {
// $ means jQuery again in here
});
Notice the $
as the first argument of the function call. 注意
$
作为函数调用的第一个参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.