javascript - 带有图像动画的按钮悬停

Question

在我的示例中，只有第一个按钮提供悬停动画

$(document).ready( function(){
  $('.show_hide_button .aube').each(function (i, value) {
		$(this).hover( function(){
    $('#some_box').animate({ width: 'toggle' });
    });
});
});

#some_box {
   overflow: hidden;
    width: 25%;
    height: 400px;
}     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="show_hide_button">
        
        <button class='aube'>element</button><div id="some_box"><img src='http://lorempicsum.com/futurama/627/200/2' /></div>
    </li>
    <li class="show_hide_button">
       
        <button class='aube'>elementum</button><div id="some_box"><img src='http://lorempicsum.com/futurama/627/200/3' /></div>
    </li>
    <li class="show_hide_button">
        
        <button class='aube'>elementu</button><div id="some_box"><img src='http://lorempicsum.com/futurama/627/200/4' /></div>
    </li>
</ul>

有没有一种方法可以使用相同的类来循环按钮，以便为正确的图像设置动画？

Answer 1

你所做的是在将鼠标悬停在一个 li 上时显示每个 some_box 。您需要以某种方式将当前悬停的 li 与其图像链接起来。 sibling 中的任何一个都具有类似数据属性的东西。

我试图复制您发布的网站。请参阅下面的片段。还在代码里面添加了一些解释。如果您需要更多信息，请告诉我

//get hover button ( li )
var button = $(".show_hide_button")
$(button).hover(function() {
  // remove  ( if any ) added class on previously hovered li
  $("li").removeClass("hoverMe")
    // add class on current hovered li for style purposes  
  $(this).addClass("hoverMe")
    // link the hovered li to it's div containg image
  var target = $(this).attr("data-target")
    //   remove  ( if any ) added class on previously linked div containing image
  $(".right_container >div").removeClass("active")
    // add class to current linked div with the hovered li
  $(target).addClass("active")

})

/* layout */

ul {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.right_container {
  float: left;
  width: 50%;
  position: Relative;
}

.right_container > div {
  position: absolute;
  top: 0;
  left: 0;
}

.right_container img {
  max-width: 100%;
  opacity: 0;
  transition: 0.3s;
}


/* default colors and backrounds */

li.hoverMe {
  background: red;
}

.right_container > div:before {
  background: red;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  transition: 2s;
}


/* custom colors and backgrounds */

.right_container > div:nth-child(2):before,
li:nth-child(2n).hoverMe {
  background: yellow;
}

.right_container > div:nth-child(3):before,
li:nth-child(3n).hoverMe {
  background: green;
}


/* animations of image and pseudo-element (:before) when hover on li */

.right_container > div.active:before {
  animation-name: widthAnim;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
  z-index: 100;
}

.right_container > div.active img {
  animation-name: justopac;
  animation-delay: 0.5s;
  animation-duration: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}


/* animations */

@keyframes widthAnim {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes justopac {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="show_hide_button" data-target="#elem1">
    element1
  </li>
  <li class="show_hide_button" data-target="#elem2">
    element2
  </li>
  <li class="show_hide_button" data-target="#elem3">
    element3
  </li>
</ul>
<div class="right_container">
  <div id="elem1">
    <img src='http://lorempicsum.com/futurama/627/200/2' />
  </div>
  <div id="elem2">
    <img src='http://lorempicsum.com/futurama/627/200/3' />
  </div>
  <div id="elem3">
    <img src='http://lorempicsum.com/futurama/627/200/4' />
  </div>
</div>