将一个div淡入另一个div

Question

我在将一个div淡入另一个div时遇到了一些小问题，下面是我的代码(和test page)：

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
});

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

文档here。