Hover slider Effect with Jquery does not work

Question

Hover slider Effect with Jquery does not work

Asked 6 years, 5 months ago

Viewed 68 times

0

I am developing a web application using html,css,Jquery and put an animation like this in my application.

link with example that as wanted in my application

But when passing the mouse over the images the animation does not work and does not exchange the images as in the link I passed as an example.

$(function() {
  //custom animations to use
  //in the transitions
  var animations = ['right', 'left', 'top', 'bottom', 'rightFade', 'leftFade', 'topFade', 'bottomFade'];
  var total_anim = animations.length;
  //just change this to one of your choice
  var easeType = 'swing';
  //the speed of each transition
  var animSpeed = 450;
  //caching
  var $hs_container = $('#hs_container');
  var $hs_areas = $hs_container.find('.hs_area');

  //first preload all images
  $hs_images = $hs_container.find('img');
  var total_images = $hs_images.length;
  var cnt = 0;
  $hs_images.each(function() {
    var $this = $(this);
    $('<img/>').load(function() {
      ++cnt;
      if (cnt == total_images) {
        $hs_areas.each(function() {
          var $area = $(this);
          //when the mouse enters the area we animate the current
          //image (random animation from array animations),
          //so that the next one gets visible.
          //"over" is a flag indicating if we can animate 
          //an area or not (we don't want 2 animations 
          //at the same time for each area)
          $area.data('over', true).bind('mouseenter', function() {
            if ($area.data('over')) {
              $area.data('over', false);
              //how many images in this area?
              var total = $area.children().length;
              //visible image
              var $current = $area.find('img:visible');
              //index of visible image
              var idx_current = $current.index();
              //the next image that's going to be displayed.
              //either the next one, or the first one if the current is the last
              var $next = (idx_current == total - 1) ? $area.children(':first') : $current.next();
              //show next one (not yet visible)
              $next.show();
              //get a random animation
              var anim = animations[Math.floor(Math.random() * total_anim)];
              switch (anim) {
                //current slides out from the right
                case 'right':
                  $current.animate({
                      'left': $current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the left
                case 'left':
                  $current.animate({
                      'left': -$current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the top	
                case 'top':
                  $current.animate({
                      'top': -$current.height() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the bottom	
                case 'bottom':
                  $current.animate({
                      'top': $current.height() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the right	and fades out
                case 'rightFade':
                  $current.animate({
                      'left': $current.width() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the left and fades out	
                case 'leftFade':
                  $current.animate({
                      'left': -$current.width() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the top and fades out	
                case 'topFade':
                  $current.animate({
                      'top': -$current.height() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the bottom and fades out	
                case 'bottomFade':
                  $current.animate({
                      'top': $current.height() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                default:
                  $current.animate({
                      'left': -$current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
              }
            }
          });
        });

        //when clicking the hs_container all areas get slided
        //(just for fun...you would probably want to enter the site
        //or something similar)
        $hs_container.bind('click', function() {
          $hs_areas.trigger('mouseenter');
        });
      }
    }).attr('src', $this.attr('src'));
  });


});

.hs_container{
position:relative;
width: 77%;
height:471px;
overflow:hidden;
clear:both;
border:2px solid #fff;
cursor:pointer;
-moz-box-shadow:1px 1px 3px #222;
-webkit-box-shadow:1px 1px 3px #222;
box-shadow:1px 1px 3px #222;
left: 16%;
margin-top:2%;
}


.hs_container .hs_area{
position:absolute;
overflow:hidden;
width: 222%;
}
.hs_area img {
  position: absolute;
  top: 0px;
  left: 0px;
  display:none;
}


.hs_area img.hs_visible{
display:block;
z-index:9999;
 
}



.hs_area1{
border-right:2px solid #fff;
 
}
.hs_area4, .hs_area5{
border-top:2px solid #fff;
}
.hs_area4{
border-right:2px solid #fff;
}
.hs_area3{
border-top:2px solid #fff;
}
.hs_area1{
width:449px;
height:334px;
top:0px;
left:0px;
}
.hs_area2{
width:451px;
height:165px;
top:0px;
left:451px;
}
.hs_area3{
width:451px;
height:167px;
top:165px;
left:451px;
}
.hs_area4{
width:192px;
height:135px;
top:334px;
left:0px;
}
.hs_area5{
width:708px;
height:135px;
top:334px;
left:194px;
  position:relative;
}
.hs_area6{
 width:18%;
height:135px;
top:334px;
left:50.3%;
   position:relative;
}
.hs_area7{
 width:18%;
height:335px;
top:0px;
left:50.3%;
   position:relative;
}
#bolo_fuba_animacao{
width:18%;
left: 5.2%;
  

}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="js/modernizr.custom.js"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Cantarell.font.js" type="text/javascript"></script>


  <div id="hs_container" class="hs_container">
     <div class="hs_area hs_area1">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg" alt="" />
</div>
<div class="hs_area hs_area2">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg" alt="" />
</div>
<div class="hs_area hs_area3">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg" alt="" />
</div>
<div class="hs_area hs_area4">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg" alt="" />
</div>
<div class="hs_area hs_area5">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg" alt="" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg" alt="" />
</div>


<div class="hs_area hs_area6">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt=""  id="bolo_fuba_animacao"/>
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area6/2.jpg" alt="" id="bolo_fuba_animacao"/>
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area6/3.jpg" alt="" id="bolo_fuba_animacao"/>
</div>



<div class="hs_area hs_area7">
  <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt="" id="bolo_fuba_animacao" />
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area7/2.jpg" alt="" id="bolo_fuba_animacao"/>
  <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area7/3.jpg" alt="" id="bolo_fuba_animacao"/>
</div>
  </div>

No hovering over images of area 6 and 7 , area 6 cake top, area 7 cake bottom.

A after I hover the mouse over the area 6 cake top, area 7 cake bottom.

UPDATE While pulling width: 200% error persisted

Try to edit your post by placing all scripts used. Including the Cdn link of external libraries

– Phelipe

2018/01/31 at 14:57
ready, I put all js external libraries

– User1999

2018/01/31 at 15:12

1 answer

Browser other questions tagged html jquery css html5 css3

You are not signed in. Login or sign up in order to post.

by Valdeir Psr • **10,804** points · Answer 1 · 2018-01-31T15:35:04+00:00

The problem is on the line var $current = $area.find('img:visible');. When you do this, it will grab all the images that are visible, however, all the images are visible (how is one over the other gives the impression that).

To fix this error you must hide the images that nay have the class hs_visible. To do this simply add the CSS below:

.hs_area img {
  position: absolute;
  top: 0px;
  left: 0px;
  display:none
}

Full example:

$(function() {
  //custom animations to use
  //in the transitions
  var animations = ['right', 'left', 'top', 'bottom', 'rightFade', 'leftFade', 'topFade', 'bottomFade'];
  var total_anim = animations.length;
  //just change this to one of your choice
  var easeType = 'swing';
  //the speed of each transition
  var animSpeed = 450;
  //caching
  var $hs_container = $('#hs_container');
  var $hs_areas = $hs_container.find('.hs_area');

  //first preload all images
  $hs_images = $hs_container.find('img');
  var total_images = $hs_images.length;
  var cnt = 0;
  $hs_images.each(function() {
    var $this = $(this);
    $('<img/>').load(function() {
      ++cnt;
      if (cnt == total_images) {
        $hs_areas.each(function() {
          var $area = $(this);
          //when the mouse enters the area we animate the current
          //image (random animation from array animations),
          //so that the next one gets visible.
          //"over" is a flag indicating if we can animate 
          //an area or not (we don't want 2 animations 
          //at the same time for each area)
          $area.data('over', true).bind('mouseenter', function() {
            if ($area.data('over')) {
              $area.data('over', false);
              //how many images in this area?
              var total = $area.children().length;
              //visible image
              var $current = $area.find('img:visible');
              //index of visible image
              var idx_current = $current.index();
              //the next image that's going to be displayed.
              //either the next one, or the first one if the current is the last
              var $next = (idx_current == total - 1) ? $area.children(':first') : $current.next();
              //show next one (not yet visible)
              $next.show();
              //get a random animation
              var anim = animations[Math.floor(Math.random() * total_anim)];
              switch (anim) {
                //current slides out from the right
                case 'right':
                  $current.animate({
                      'left': $current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the left
                case 'left':
                  $current.animate({
                      'left': -$current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the top	
                case 'top':
                  $current.animate({
                      'top': -$current.height() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the bottom	
                case 'bottom':
                  $current.animate({
                      'top': $current.height() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the right	and fades out
                case 'rightFade':
                  $current.animate({
                      'left': $current.width() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the left and fades out	
                case 'leftFade':
                  $current.animate({
                      'left': -$current.width() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the top and fades out	
                case 'topFade':
                  $current.animate({
                      'top': -$current.height() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                  //current slides out from the bottom and fades out	
                case 'bottomFade':
                  $current.animate({
                      'top': $current.height() + 'px',
                      'opacity': '0'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'top': '0px',
                        'opacity': '1'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
                default:
                  $current.animate({
                      'left': -$current.width() + 'px'
                    },
                    animSpeed,
                    easeType,
                    function() {
                      $current.hide().css({
                        'z-index': '1',
                        'left': '0px'
                      });
                      $next.css('z-index', '9999');
                      $area.data('over', true);
                    });
                  break;
              }
            }
          });
        });

        //when clicking the hs_container all areas get slided
        //(just for fun...you would probably want to enter the site
        //or something similar)
        $hs_container.bind('click', function() {
          $hs_areas.trigger('mouseenter');
        });
      }
    }).attr('src', $this.attr('src'));
  });


});

.hs_container {
  position: relative;
  width: 87%;
  height: 471px;
  overflow: hidden;
  clear: both;
  border: 2px solid #fff;
  cursor: pointer;
  -moz-box-shadow: 1px 1px 3px #222;
  -webkit-box-shadow: 1px 1px 3px #222;
  box-shadow: 1px 1px 3px #222;
  left: 9%;
}

.hs_container .hs_area {
  position: absolute;
  overflow: hidden;
  width: 222%;
}

.hs_area img {
  position: absolute;
  top: 0px;
  left: 0px;
  display:none
}

.hs_area img.hs_visible {
  display: block;
  z-index: 9999;
}

.hs_area1 {
  border-right: 2px solid #fff;
}

.hs_area4,
.hs_area5 {
  border-top: 2px solid #fff;
}

.hs_area4 {
  border-right: 2px solid #fff;
}

.hs_area3 {
  border-top: 2px solid #fff;
}

.hs_area1 {
  width: 449px;
  height: 334px;
  top: 0px;
  left: 0px;
}

.hs_area2 {
  width: 451px;
  height: 165px;
  top: 0px;
  left: 451px;
}

.hs_area3 {
  width: 451px;
  height: 167px;
  top: 165px;
  left: 451px;
}

.hs_area4 {
  width: 192px;
  height: 135px;
  top: 334px;
  left: 0px;
}

.hs_area5 {
  width: 708px;
  height: 135px;
  top: 334px;
  left: 194px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <div id="hs_container" class="hs_container">
    <div class="hs_area hs_area1">
      <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/1.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/2.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area1/3.jpg" alt="" />
    </div>
    <div class="hs_area hs_area2">
      <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/1.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/2.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area2/3.jpg" alt="" />
    </div>
    <div class="hs_area hs_area3">
      <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/1.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/2.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area3/3.jpg" alt="" />
    </div>
    <div class="hs_area hs_area4">
      <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/1.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/2.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area4/3.jpg" alt="" />
    </div>
    <div class="hs_area hs_area5">
      <img class="hs_visible" src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/1.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/2.jpg" alt="" />
      <img src="https://tympanus.net/Tutorials/HoverSlideEffect/images/area5/3.jpg" alt="" />
    </div>
  </div>

Another point is that the images that nay have the class hs_visible, are probably in the wrong folder.