将一个div淡入另一个

Question

将一个div淡入另一个时，我遇到一些小问题，这是我的代码（和测试页 ）：

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：

<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：

.phase-1 .grid-image {
    width:210px;
    height:220px;
    overflow:hidden;    
    }

.phase-2 {
    position:relative;
    top:-220px;
    }

更新：我有一个“工作”（请参阅​​有问题的测试链接）。 是否有可能阻止它褪色为白色然后在下一阶段褪色？ 我想将两个div彼此淡化，而不是先淡化为白色。

Answer 1

如果在控制台上键入$ ，它将回答undefined ，因此它可能已由其他脚本重新定义。 要再次使用$表示jQuery，请使用以下语法

$(document).ready(function($) {
    // $ means jQuery again in here
});

注意$作为函数调用的第一个参数。

文档在这里 。