Question

我有一个test setup，其中缩略图div淡入另一个div，但它有几个问题。

如何删除白色暂停？此刻它将一个div变为白色然后在第二个div中消失。如何让它从一个div褪色到另一个div而不会褪色变成白色？
如果你快速盘旋并且第二个div出现在原版下方，它会有点不稳定。我怎样才能让它更稳定？
我将有多个缩略图，每个缩略图都有不同的图像和文字，如何设置网格以包含多个框，而不会一次淡入/淡出（即单独）。

以下是代码：

Javacript：

<script type="text/javascript"> 

$(document).ready(function(){
            $(".phase-2").hide();
        });


$(function(){
$('.grid-box').hover(
        function(){
            $('.grid-box .phase-1').fadeOut(300, function(){
                $('.grid-box .phase-2').fadeIn(300);                         
            });
        },
        function(){
            $('.grid-box .phase-2').fadeOut(300, function(){
                $('.grid-box .phase-1').fadeIn(300);                         
            });
        }
        ); 
});
</script>

HTML：

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

Answer 1

1）不要在回调上执行悬停项的淡入淡出，而是立即执行。这将阻止白色背景显示：

$('.grid-box .phase-1').fadeOut(300);
$('.grid-box .phase-2').fadeIn(300);

2）最简单的方法是在缩略图容器上指定一个大小，然后添加overflow: hidden;。

3）最后，以下代码将确保只有hover-over div中包含的元素才会受到影响：

$(function(){
    $('.grid-box').hover(
        function(){
            $('.phase-1', this).fadeOut(300);
            $('.phase-2', this).fadeIn(300);
        },
        function(){
            $('.phase-2', this).fadeOut(300)
            $('.phase-1', this).fadeIn(300);
        }
    ); 
});

Answer 2

<强> HTML

<div class="grid-box">
    <div class="phase-1"></div>
    <div class="phase-2"></div>
</div>

<强> JQ

$(document).click(function (){
$('.grid-box .phase-1').animate({opacity:50},2000).queue(function(){
     $(this).hide();

});
$('.grid-box .phase-2').fadeIn(2000);
});

<强> CSS

.phase-1{width: 100px;height: 100px;background: red; position:absolute;}
.phase-2{width: 100px;height: 100px;background: blue;display: none; position:absolute;}

我知道这不是你的代码的样子，但你可以在一个简单的解释中看到我的意思。

这是jsfiddle http://jsfiddle.net/NxJf8/

中的演示

将一个div淡入另一个：更稳定，消除白色暂停，多次淡化

2 个答案: