Анимация покрытия одного div с другим div

Я пытаюсь создать эффект для игры в видеопокер, где одна карта скользит поверх другой карты.Анимация покрытия одного div с другим div

JSFiddle очень простой, я думаю. Вот мой код:

CSS:

body { 
    width:80%; 
} 

#board { 
    width:100%; 
    height:25%; 
} 
div .card { 
    width:16%; 
    height:100px; 
    display:inline-block; 
} 

div .redbox { 
    width:100; 
    height:100%; 
    background-color:red; 
} 

div .bluebox { 
    width:100; 
    height:100%; 
    background-color:blue; 
}

HTML:

<body> 
<div id="main"> 
     <div id="board"> 
      <div class="card" id="c-0"> 
       <div class="redbox"></div> 
      </div> 
      <div class="card" id="c-1"> 
       <div class="redbox"></div> 
      </div> 
      <div class="card" id="c-2"> 
       <div class="redbox"></div> 
      </div> 
      <div class="card" id="c-3"> 
       <div class="redbox"></div> 
      </div> 
      <div class="card" id="c-4"> 
       <div class="redbox"></div> 
      </div> 
     </div> 
     <button>Click Here!</button> 
    </div> 
<body>

JS:

$('button').click(function (e) { 
    for (var i = 0; i < 5; i++) { 
     var $newDiv = $('<div>'); 
     $newDiv.addClass('bluebox'); 
     $newDiv.hide(); 
     $('#c-' + i).append($newDiv); 
     $newDiv.slideToggle(); 
    } 
});

Мои две проблемы заключаются в следующем:

Я хотел бы установить ширину каждой карты в процентах и автоматически настроить высоту. Но если я удалю свойство CSS высоты, весь DIV исчезнет.
Не могу понять, как сделать один div-слайд поверх другого. Я не хочу удалять базовый div, поскольку он будет общим фоновым изображением, которое я всегда хочу быть там, когда на карте нет карты.

Я думаю, может быть, я должен также отметить, что в конце концов я собираюсь изменить эти Div элементы в фотошопе элементы, я просто сделал их цветные коробки для простоты. Я не знаю, будет ли это иметь какое-то значение.

EDITED:

Первая проблема, оказывается, чтобы быть трудным исправить. Добавляя «позицию: относительный» к элементам .card и «position: absolute» к элементам div/color box/color, я могу получить новое, чтобы перейти поверх другого. Но теперь содержащийся элемент рухнул, и я не знаю, как заставить его расширяться до размера его содержимого.

Новый JSFiddle:

http://jsfiddle.net/yv3mwao9/

источник

2015-11-09 wbruntra

является то, что для просто игры или реальных азартных игр? – KeepMove

просто игра, для получения опыта работы с HTML/CSS/JS – wbruntra

добавить в свой CSS:

#main { 
    position: relative; 
}

изменить ваш bluebox CSS

div .bluebox { 
background-color:blue; 
position: absolute; 
top:0; 
}

вашего JQuery:

$('button').click(function (e) { 
    for (var i = 0; i < 5; i++) { 
     var $newDiv = $('<div>'); 
     $newDiv.addClass('bluebox') 
       .css({"width": $(".redbox").outerWidth(), 
        "height": $(".redbox").outerHeight() 
        }); 
     $newDiv.hide(); 
     $('#c-' + i).append($newDiv); 
     $newDiv.slideToggle(); 
    } 
});

источник

2015-11-09 21:41:05 KeepMove

, как во второй части, ваш ответ является собственностью г-индекс CSS

(на детей одного и того же элемента, выше г-индекс будет печататься на верхней части своих братьев и сестер)

Обратите внимание, что атрибут позиции CSS должен быть установлен в относительное или абсолютное для Z-индекс для работы

источник

2015-11-09 19:24:31 Elentriel

Это разрешило вторую проблему, но теперь сдерживающий div распался (см. Править).Любые идеи, как его расширить? – wbruntra

Приношу свои извинения, но здесь вы должны извинить меня, в качестве стороннего разработчика, я не все, что css savvy :) – Elentriel

Анимация покрытия одного div с другим div

ответ

Смежные вопросы