如何更改悬停以点击以下代码的功能？

时间：2016-09-26 07:02:15

标签： jquery html css3

在这段代码中我无法修改单击功能。当窗口上的鼠标移动时，叠加动画工作和我点击窗口时这个动画功能一样。谁能帮我。我的代码是吼叫。 

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
p {
  margin: 0;
  padding: 0;
}
.content-item {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* height: 300px;*/
  height: 998px;
  /* height:auto;*/
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  /*width: 400px;*/
  width: 100%;
  background-color: #1e1e1e;
}
.content-item .overlay {
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid transparent;
  bottom: 0;
  height: 0;
  opacity: .95;
  position: absolute;
  transform: rotate(90deg);
  left: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.content-item:hover .overlay {
  border-bottom: 2700px solid #ffffff;
  border-left: 2700px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
/*.overlay_CLICKanim {
	border-bottom: 2600px solid #e8c63d;
    border-left: 2600px solid transparent;

  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}*/

.content-item .corner-overlay-content {
  bottom: 15px;
  color: #333;
  position: absolute;
  right: 15px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item:hover .corner-overlay-content {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
/*.corner-overlay-content_anim {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}*/

.content-item .overlay-content {
  bottom: 0;
  color: #333;
  left: 0;
  opacity: 0;
  padding: 30px;
  position: absolute;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.content-item .overlay-content h2 {
  border-bottom: 1px solid #333;
  padding: 0 0 12px;
}
.content-item:hover .overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/*.overlay-content_anim {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}*/

/*animation element*/

.animation-element {
  position: relative;
  width: 30%;
  margin: 0% 1.33 2.66% 1.33%;
  float: left;
}
/*3 grid layout*/

.animation-element:nth-of-type(3n-2) {
  width: 100%;
  margin: 0% 1.375% 2.75% 0%;
  clear: left;
  text-align: -webkit-center;
}
.animation-element:nth-of-type(3n-1) {
  width: 100%;
  margin: 0% 1.375% 2.75% 1.375%;
  text-align: -webkit-center;
}
.animation-element:nth-of-type(3n-0) {
  width: 100%;
  margin: 0% 0% 2.75% 1.375%;
  clear: right;
  text-align: -webkit-center;
}
.bounce-up .subject {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  /* transform: translate3d(0px, 571.061px, 0px); opacity: 0.681153;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;*/
}
.bounce-up.in-view .subject {
  opacity: 0.5;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
li {
  list-style: none;
  font-size: 74px;
  padding: 40px;
}
a {
  color: #292727;
  text-decoration: none;
}
li a:hover {
  text-decoration: none;
}
ul:active {
  opacity: 1 !iimportant;
}
.parent_header {
  position: relative;
}
.main {
  /*position:absolute;
	width:100%;
	height:100%;
	 z-index: 9999;	*/
  background-color: #1e1e1e;
  z-index: 9999;
}
.blue {
  /*	background-color:transparent;*/
  /*display: block;
    position: absolute;
    height: 200px;
    width: 100%;
    top: 0;
    right: -102%;
    transition: .4s ease-out;
    -webkit-transition: .4s ease-out;*/
  opacity: 0.4;
}
.main {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
}
.closebtn {
  position: fixed;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

</head>

<body>

  <span style="font-size:30px;cursor:pointer;position: relative;top: 50%;left: 5%;z-index: 9999;opacity: 1 !important;color: aliceblue;" class="menu_bar">&#9776;</span>
  <div class="content-item">

    <div class="overlay"></div>

    <div class="corner-overlay-content">Info</div>

    <div class="overlay-content">
      <div class="container cf">
        <ul class="animation-element bounce-up cf">
          <li class="subject development active">
            <a href="">HOME</a>
          </li>
        </ul>

        <ul class="animation-element bounce-up cf">
          <li class="subject development">
            <a href="">ABOUT US</a>
          </li>
        </ul>
        <ul class="animation-element bounce-up cf">
          <li class="subject development">
            <a href="">PORTFOLIO</a>
          </li>
        </ul>

        <ul class="animation-element bounce-up cf">
          <li class="subject development">
            <a href="">GALLERY</a>
          </li>
        </ul>

      </div>
    </div>

  </div>

</body>

</html>

0 个答案:

没有答案
相关问题
最新问题