Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; 有没有办法循环使用相同类的按钮，以便为正确的图像设置动画？

Answer 1

您可以将事件处理程序附加到所需的元素类，然后在事件处理程序中使用this来获取与当前元素相关的元素，该元素是事件目标。像这样的东西：

$(document).ready( function(){
  $('.show_hide_button .aube').hover(function () {
    $(this).next('#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 2

当您将鼠标悬停在一个some_box上时，您正在做的是显示每个li。你需要以某种方式链接当前悬停的li与它的图像。兄弟姐妹要么是数据属性，要么是数据属性。

我试图复制您发布的网站。请参阅下面的代码段。还在代码中添加了一些解释。如果您想了解更多信息，请与我们联系

//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>

按钮悬停与图像动画

2 个答案: