Переход из одного деления в другое: сделать более стабильным, убрать паузу, многократные замирания - PullRequest
Новая
       8

Переход из одного деления в другое: сделать более стабильным, убрать паузу, многократные замирания

4 голосов
/ 17 мая 2011

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

  1. Как я могу удалить белую паузу?В данный момент он исчезает из одного делителя в белый, а затем исчезает во втором.Как я могу заставить его исчезать из одного деления в другое, не переходя в белый цвет?
  2. Это немного нестабильно, если вы быстро наведите курсор мыши, и второй 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>

Ответы [ 2 ]

7 голосов
/ 17 мая 2011

1) Вместо того, чтобы делать постепенный переход элемента наведения на обратный вызов, сделайте это немедленно.Это предотвратит появление белого фона: 

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

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

3) Наконец, следующий код будет гарантировать, что будут затронуты только элементы, содержащиеся в элементе hovered-over: 

$(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);
        }
    ); 
});
1 голос
/ 17 мая 2011

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/

...