Блог

У меня есть тестовая настройка, в которой миниатюра div переходит в другой div, хотя с этим есть пара проблем.

1. Как я могу удалить белую паузу? На данный момент один div становится белым, а затем исчезает во втором div. Как я могу сделать так, чтобы он переходил из одного div в другой, не превращаясь в белый?
2. Это немного нестабильно, если вы быстро наведете курсор на второй div, и второй div появится под исходным. Как я могу сделать это немного более стабильным?
3. У меня будет несколько эскизов с разными изображениями и текстом в каждом, как я могу настроить сетку так, чтобы она включала несколько полей без одновременного их появления (т. е. по отдельности).

Вот код:

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) Вместо того, чтобы выполнять затухание элемента наведения при обратном вызове, сделайте это немедленно. Это предотвратит отображение белого фона через:

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

2) Самый простой способ сделать это — указать размер в контейнере миниатюр и добавить overflow: hidden; к нему.

3) Наконец, следующий код гарантирует, что будут затронуты только элементы, содержащиеся в наведенном 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);
        }
    ); 
});
  

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