将一个div淡入另一个div:使其更稳定，消除白色停顿，多次淡入淡出 [英] Fading one div into another: Make more stable, remove white pause, multiple fades

问题描述

我有一个测试设置，其中缩略图div逐渐淡入另一个div，但是有一些问题.

I have a test setup where the thumbnail div fades into another div, there's a couple of problems with it though.

1. 如何删除白色暂停?此刻，它从一个div逐渐淡出为白色，然后在第二个div中逐渐淡出.如何使其从一个div淡入另一个div而又不褪色为白色?
2. 如果您将鼠标悬停在第二个div下方，则它会变得有些不稳定.如何使它更稳定?
3. 我要有多个缩略图，每个缩略图中都有不同的图像和文本，如何设置网格以包括多个框，而又不使它们同时全部淡入或淡出(即分别).

代码如下:

Javacript:

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>

推荐答案

1)与其立即执行回调中的悬停项目的fadeIn，不如执行它.这样可以防止白色背景通过以下方式显示:

1) Rather than do the fadeIn of the hover item on the callback, do it immediately. This will prevent the white background showing through:

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

2)最简单的方法是在缩略图容器上指定大小，并在其上添加overflow: hidden;.

2) The easiest way to do this is to specify a size on the thumbnail container and the add overflow: hidden; to it.

3)最后，以下代码将确保仅将鼠标悬停在div内的元素受影响:

3) Finally the following code will make sure only the elements contained within the hovered-over div will be affected:

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

这篇关于将一个div淡入另一个div:使其更稳定，消除白色停顿，多次淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！