При наведении слайд-изображения влево (jQuery) и обратно, если нет зависания

Question

При наведении слайд-изображения влево (jQuery) и обратно, если нет зависания

< $ ( 'li' ). hover ( function () { $ ( this ). addClass ( 'active' ); }, function () { $ ( this ). removeClass ( 'active' ); }) class = 'answer' id = '4263417' itemscope itemtype = 'HTTP: //schema.org/Answer'>

1 принят

Это простой пример;]

li {
 width: 0;
 padding: 15px;
 float: right;
 height: 300px;
 overflow: hidden;
 cursor: pointer;
 color: #fff;
}

li:nth-child(1) {
  background: red;
}
li:nth-child(2) {
  background: green;
}
li:nth-child(3) {
  background: blue;
}

li.active {
  width: 400px;
  transition: all 1s;
}



ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

$(document).ready(function(){
    $(".img-1").hover(function(){
        $('.img-2').stop().animate({'left': '160px'}, 500);
        $('.img-3').stop().animate({'left': '180px'}, 500);
    }, function(){
        $('.img-2').stop().animate({'left': '160px'}, 500);
        $('.img-3').stop().animate({'left': '180px'}, 500);
    });
    $(".img-2").hover(function(){
        $('.img-2').stop().animate({'left': '20px'}, 500);
    }, function(){
                $('.img-2').stop().animate({'left': '160px'}, 500);
    });
    $(".img-3").hover(function(){
        $('.img-2').stop().animate({'left': '20px'}, 500);
        $('.img-3').stop().animate({'left': '40px'}, 500);
    }, function(){
                $('.img-3').stop().animate({'left': '180px'}, 500);
        $('.img-2').stop().animate({'left': '160px'}, 500);
    });
});

1

Попробуйте плагин zAccordian jquery. https://natearmagost.github.io/zaccordion/index.html

1

Поэтому я немного изменил ваш пример:

Я сделал это: изменил позиции на относительные и установил переполнение, скрытое до .wrapper

.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
    border: black 1px solid;
    width: 200px;
    Height: 50px;
    position:relative;
    overflow: hidden;
    top:0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="img-1">
  </div>
  <div class="img-2">
  </div>
  <div class="img-3">
  </div>
</div>

div

1

Вы можете сделать это полностью с помощью CSS, без javascript.

В приведенном ниже примере манипулирует z-index, когда a divзависает. Единственный сложный вопрос - это «изображение-3». Также необходимо изменить z-индекс «image-2», чтобы убедиться, что он находится поверх «image-1».

Поэтому в HTML-изображение «image-2» помещается после «image-3». Чем в CSS 'image-2' можно рассматривать как брата.

[class^="img"] {
  position: absolute;
  top: 0;
  left: 0;
}

.img-1 {
  z-index: 3;
}

.img-1 img {
  border: 6px solid #FF0;
}

.img-2 {
  left: 20px;
  z-index: 2;
}

.img-2 img {
  border: 6px solid #F00;
}

.img-3 {
  left: 40px;
  z-index: 1;
}

.img-3 img {
  border: 6px solid #F60;
}

div[class^="img"]:hover {
  z-index: 5;
}

.img-3:hover+.img-2 {
  z-index: 4;
}

<div class="wrapper">
  <div class="img-1">
    <img src="//placehold.it/200x50&text='image-1'" alt="">
  </div>
  <div class="img-3">
    <img src="//placehold.it/200x50&text='image-3'" alt="">
  </div>
  <div class="img-2">
    <img src="//placehold.it/200x50&text='image-2'" alt="">
  </div>
</div>

JavaScript, JQuery, HTML, CSS,

javascript,jquery,html,css,

2

Ответов: 4