методы jQuery для отображения и скрытия элементов

jquery-3.3.1.min.js bootstrap.min.js bootstrap.min.css

by Denis Tverdokhlebov

HTML

<script src="https://itchief.ru/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://itchief.ru/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="https://itchief.ru/examples/vendors/jquery/jquery-3.3.1.min.js"></script>
<h1 class="h3 page-header text-center">Методы jQuery для отображения и скрытия элементов</h1>
<div style="text-align:center; margin: 10px 0">
  <button id="show">Show</button>
  <button id="hide">Hide</button>
  <button id="toggle">Toggle</button>
</div>
<div style="text-align:center; margin: 10px 0">
  <button id="fadein">fadeIn</button>
  <button id="fadeout">fadeOut</button>
  <button id="fadetoggle">fadeToggle</button>
  <button id="fadeto2">fadeTo 0</button>
  <button id="fadeto">fadeTo 0.5</button>
  <button id="fadeto1">fadeTo 1</button>
</div>
<div style="text-align:center; margin: 10px 0">
  <button id="slidedown">slideDown</button>
  <button id="slideup">slideUp</button>
  <button id="slidetoggle">slideToggle</button>
  <br><br><br>
  <button id="other">комбо схлопывание</button>
  <button id="other2">комбо развертывание</button>
  <button id="other3">test</button>
</div>

<div class="progress center-block" style="width: 30%">
  <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    60%
  </div>
</div>

<div style="width: 50%; margin: 10px auto;">
  <div id="block">
    <p id="block2">demo text</p>
</div>

CSS

/* @keyframes zoomInCenter {
  0% {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    opacity: 0;
    width: 0%;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
    width: 100%;
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomInCenter;
  animation-name: zoomInCenter
}

@keyframes zoomOutCenter {
  0% {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    opacity: 1;
    width: 100%;
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 0;
    width: 0%;
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutCenter;
  animation-name: zoomOutCenter
} */

#block {
  height: 0px;
  width: 0px;
  background: #ededed;
  border-right: 5px solid blue;
  border-left: 5px solid blue;
  margin: 0 auto;
  opacity:0;
}
p#block2 {
  opacity:0;
}
p {
  padding:20px;
}
.progress-bar {
  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2s ease;
  -ms-transition: width .2s ease;
  transition: width .2s ease;
}

JavaScript

$(function() {
  parameters = {
    duration: 1000,
/* 		progress: function(animation, progress) {
		      $('#block')
		        .css('height','50%')
		    },
		    complete: function() {
		      $('#block')
		        .css('height', '100%')
		    } */
  }
  $('#show').click(function() {
    $('#block').show(parameters);
  });
  $('#hide').click(function() {
    $('#block').hide(parameters);
  });
  $('#toggle').click(function() {
    $('#block').toggle(parameters);
  });
  $('#fadein').click(function() {
    $('#block').fadeIn(parameters);
  });
  $('#fadeout').click(function() {
    $('#block').fadeOut(parameters);
  });
  $('#fadetoggle').click(function() {
    $('#block').fadeToggle(parameters);
  });
  $('#fadeto').click(function() {
    $('#block').fadeTo(parameters, 0.5);
  });
  $('#fadeto1').click(function() {
    $('#block').fadeTo(parameters, 1);
  });
  $('#fadeto2').click(function() {
    $('#block').fadeTo(parameters, 0);
  });
  $('#slideup').click(function() {
    $('#block').slideUp(parameters);
  });
  $('#slidedown').click(function() {
    $('#block').slideDown(parameters);
  });
  $('#slidetoggle').click(function() {
    $('#block').slideToggle(parameters);
  });

  $('#other').click(function() {
    $('#block').slideUp(parameters);
  });

  $('#other2').click(function() {
    $('#block').slideDown(parameters);

  });
});



$( "#other3" ).click(function() {
	$( "#block" ).animate({ "opacity": "1" }, "slow" );
  $( "#block" ).animate({ "height": "200px" }, "slow" );
  $( "#block" ).animate({ "width": "100%" }, "slow" );
  $( "#block2" ).animate({ "opacity": "1" }, "slow" );
  
});