无法掩盖同位素完美

问题描述 投票：0回答：1

我创建了一个网站，上面有很多与“同位素”创建盒，它的作品完美，但我想这些箱子是完全隐藏在我点击按钮我的网页和brefore的第一负载。

它似乎工作，但是从实例4盒等出现快速dispear在第一次加载。

任何想法来解决这个问题？谢谢你的帮助

在这里我的代码：https://codepen.io/Roberta3d/pen/ZwvzJB

这里太

**HTML**
<!doctype html>
<html class="export" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Filter &amp; sort magical layouts">

  <title>Isotope &#xB7; Filter &amp; sort magical layouts</title>

    <!-- Isotope does not require any CSS files -->
    <link rel="stylesheet" href="css/isotope-docs.css?6" media="screen">


</head>


<body class="page--index">



<div class="button-group filters-button-group">
  <button class="button is-checked" data-filter=".dessin"> DESSIN</button>
  <button class="button" data-filter=".troisd"> 3D </button>
  <button class="button" data-filter=".graphisme"> GRAPHISME </button>
    </div>




<div class="grid">
<div class="element-item dessin " data-category="dessin"> </div>
    <div class="element-item troisd " data-category="troisd"> </div>
<div class="element-item graphisme " data-category="graphisme"> </div>
<div class="element-item graphisme " data-category="graphisme"> </div>
</div>      




<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

  <script src="js/isotope-docs.min.js?6"></script>


</body>

</html>

CSS

/* ---- counting ---- */

.grid--counting {
  counter-reset: item;
}

.grid--counting .grid-item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: #555;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

/* ---- horizontal ---- */

/* horizontal examples need height */
.grid--horizontal {
  height: 334px;
}

/* ---- static banner ---- */

.grid--has-banner {
  position: relative;
}

.static-banner {
  position: absolute;
  left: 10px;
  top: 10px;
  background: hsla(210, 100%, 50%, 0.8);
  z-index: 1;
  padding: 2px 20px;
  color: white;
  pointer-events: none;
}

/* ---- fixed-width ---- */

.grid--fixed-width {
  width: 304px;
}

/* ---- stamp ---- */

.grid--has-stamp {
  position: relative;
}

/* ---- fit-width ---- */

/* centered */
.grid--fit-width {
  margin: 0 auto;
}

/* grid-image-item
------------------------- */


.grid-image-item {
  float: left;
}

.grid-image-item img {
  display: block;
  max-width: 100%;
}

/* grid-item
------------------------- */




.grid-item--gigante {
  width: 150px;
  height: 200px;
}









------------------------------------------------------------------------------------------------------------------ */










.button {
  display: inline-block;
  padding: 10px 18px;
  margin-bottom: 10px;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
  border: 1px solid #333;


}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #262524;


}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}





.element-item.troisd          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.graphisme { background: #F80; background: hsl(  36, 100%, 50%); }

.element-item.dessin       { background: #08F; background: hsl( 216, 100%, 50%); }

JAVASCRIPT

// external js: isotope.pkgd.js

// init Isotope


var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows'


});


var filterFns = {



  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// bind filter button click


$(document).ready(function() {



$('.filters-button-group').on( 'click', 'button', function() {
  var filterValue = $( this ).attr('data-filter');

  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});


    $('.element-item').hide();  

$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');


      return false;

  });
});


});
javascript hide
1个回答
0
投票

你的意思是发生在开始实施的“忽悠”？

移动

$('.element-item').hide();

到里面的顶部

$(document).ready(function() {});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.