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。

将一个div淡入另一个div

1 个答案: