Предотвращение аккордеона DIV от исчезновения

Question

У меня есть горизонтальная серия аккордеонного типа divs с шириной по умолчанию 33,33%. Я использую Jquery для анимации одного из этих divs до 60%, а два других - до 15%, поэтому я сохраняю полную ширину экрана.

Однако, зависание на div1 или div2 приводит к тому, что div3 (самый правый div в строке из трех) временно мигает или исчезает (думаю, до тех пор, пока Jquery не оживит его до ширины, которая не ударит его до следующая строка в сетке).

Есть ли способ предотвратить эту вспышку - возможно, настройка CSS? Решение, вероятно, прямо там передо мной, но у меня возникают проблемы с тем, как я могу предотвратить ошибку, не удаляя поведение сетки.

Мой HTML:

<div class="grid grid-pad"> 
      <div id="div1" class="col-1-3"> 
       <div class="content"> 
        DIV 1 
       </div> 
      </div> 
      <div id="div2" class="col-1-3"> 
       <div class="content"> 
        DIV 2 
       </div> 
      </div> 
      <div id="div3" class="col-1-3"> 
       <div class="content"> 
        DIV 3 
       </div> 
      </div> 
     </div> 

CSS:

body { 
    margin: 0px; 
} 

[class*='col-'] { 
    float: left; 
    padding-right: 20px; 
} 

[class*='col-']:last-of-type { 
    padding-right: 0px; 
} 

.grid { 
    width: 100%; 
    min-width: 755px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.grid-pad { 
    padding: 20px 0 0px 20px; 
} 

.grid-pad > [class*='col-']:last-of-type { 
    padding-right: 20px; 
} 

.push-right { 
    float: right; 
} 

/* Content Columns */ 

.col-2-3 { 
    width: 66.66%; 
} 

.col-1-3, .col-4-12 { 
    width: 33.33%; 
} 

.col-1-6, .col-2-12 { 
    width: 16.667%; 
} 

#div1 { 
    background-color: blue; 
    } 

#div2 { 
    background-color: red; 
} 

#div3 { 
background-color: yellow; 
} 

И JQuery:

$('#div1').hover(function() { 
    $(this).stop(true, true).toggleClass('col-2-3', [1000]), 
    $('#div2, #div3').stop(true, true).toggleClass('col-1-6', [1000]); 
}); 

И JSfiddle - http://jsfiddle.net/yysNr/47/

Answer 1

я в конечном итоге, используя комбинацию CSS настроек и регулировок JQuery, основанную на ответ Джо на достижения эффекта:

HTML:

<div id="parent"> 
    <div id="second"> 
     <div id="div1">&nbsp</div><div id="div2">&nbsp</div><div id="div3">&nbsp</div> 
    </div> 
<div> 

CSS:

#parent { 
    background-color: white; 
    width: 60%; 
    overflow-x: hidden; 
} 

#second { 
white-space: nowrap; 
float: left; 
width: 100%; 
background-color: brown; 
height: 500px; 
} 

#div1 { 
    background-color: tan; 
    width: 33.33%; 
    height: 100%; 
    display: inline-block; 
    white-space: normal; 
} 

#div2 { 
    background-color: red; 
    width: 33.33%; 
    height: 100%; 
    display: inline-block; 
    overflow: hidden; 
} 

#div3 { 
    background-color: green; 
    width: 33.33%; 
    height: 100%; 
    display: inline-block; 
} 

JQuery:

$('#div1').hover(function() { 
    $('#div2, #div3').stop(true, false).animate({width:'16.67%'}, 500), 
    $(this).stop(true, false).animate({width:'66.66%'}, 500); 
}, function() { 
    $(this).stop(true, false).animate({width:'33.33%'}, 500), 
    $('#div2, #div3').stop(true, false).animate({width:'33.33%'}, 500); 
}); 

$('#div2').hover(function() { 
    $('#div1, #div3').stop(true, false).animate({width:'16.67%'}, 500), 
    $(this).stop(true, false).animate({width:'66.66%'}, 500); 
}, function() { 
    $(this).stop(true, false).animate({width:'33.33%'}, 500), 
    $('#div1, #div3').stop(true, false).animate({width:'33.33%'}, 500); 
}); 

$('#div3').hover(function() { 
    $('#div1, #div2').stop(true, false).animate({width:'16.67%'}, 500), 
    $(this).stop(true, false).animate({width:'66.66%'}, 500); 
}, function() { 
    $(this).stop(true, false).animate({width:'33.33%'}, 500), 
    $('#div1, #div2').stop(true, false).animate({width:'33.37%'}, 500); 
}); 

И результат: http://jsfiddle.net/cPmDX/

Answer 2

Я думаю, что вам нужно сделать заказ объявление и удаление ваших классов, чтобы сумма ширины ваших divs никогда не превышала 100%. Это означает, что вам нужно использовать другой порядок при наведении указателя мыши, чем при наведении указателя мыши, так что вторая функция в порядке и небольшая задержка, чтобы убедиться, что расширяющиеся divs не переполняются до того, как усугубляет место.

$('#div1, #div2, #div3').hover(function() { 
    //when hovering in, make the other divs smaller first  
    $('#div1, #div2, #div3').not(this).toggleClass("col-1-6",[1000]); 
    $('#div1, #div2, #div3').not(this).toggleClass("col-1-3",[1000]); 
    //then make this one bigger 
    $(this).delay(2).toggleClass("col-2-3",[1000]); 
    $(this).delay(2).toggleClass("col-1-3",[1000]); 
}, 
function() { 
    //when hovering out, make this div smaller first 
    $(this).toggleClass("col-1-3",[1000]); 
    $(this).toggleClass("col-2-3",[1000]); 
    //then make the others bigger 
    $('#div1, #div2, #div3').not(this).delay(2).toggleClass("col-1-3",[1000]); 
    $('#div1, #div2, #div3').not(this).delay(2).toggleClass("col-1-6",[1000]); 
} 
) 

Если дивы всегда помещаются на одной и ту же линию, что вы никогда не должны потерять самую правые один к линии обернуть