將一個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
});

注意$作為函數調用的第一個參數。

文檔在這里 。