CODEWITHSUNDEEP
javascriptjquery
sonia maklouf
sonia maklouf

Reputation: 2743

button hover with image animation

In my example only the first button give a hover animation 

$(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>
Is there a way to loop the button with same classes in order to animate the proper image ?

Upvotes: 1

Views: 77

Answers (2)

Mihai T
Mihai T

Reputation: 17687

What you are doing is showing every some_box when hovering over one li . You need to link the current hovered li with it's image somehow. Either siblings either with something like a data-attribute.

I tried to replicate the website you posted. See snippet below. Also added some explanations inside the code. Let me know if you want further info

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

Upvotes: 1

Dij
Dij

Reputation: 9808

you can just attach the event handler to the class of elements you want, and then use this inside the event handler to get the element in relation to the current element on which is event target. something like 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>

Upvotes: 1

Related Questions