按钮悬停与动漫形象

Question

在我的例子只有第一个按钮给悬停动画

$(document).ready(function(){ 
 
    $('.show_hide_button .aube').each(function (i, value) { 
 
\t \t $(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

你在做什么是显示每个some_box悬停在一个li时。您需要以某种方式将当前的hli与它的图像链接起来。无论是兄弟姐妹或者像数据属性。

我试图复制您发布的网站。请参阅下面的代码片段。还在代码中添加了一些解释。让我知道如果你想了解更多信息

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

Answer 2

您可以将事件处理程序附加到所需的元素类，然后在事件处理程序中使用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>