Как свернуть изображение с помощью jquery?

Question

Я новичок в js, мне нужно изменить несколько изображений при наведении на одно и то же представьте себе вот так: http://www.revzilla.com/ на слайдере, подскажите?

Тхи мой HTML, в Ct-изображение У меня есть несколько изображений, которые перемещают мышь внутри контейнера заменяет с другими ГИМ:

<li class="product-primary clearfix"> 
 
    <a href="https://validator.w3.org/nu/#textarea"> 
 
    <div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt=""> 
 

 
     <div class="banner-new"><span>new</span> 
 
     <p class="title-product-hidd">lorem</p> 
 
     </div> 
 
     <!--.banner-new--> 
 
     <div class="banner-acti"> 
 
     <ul> 
 
      <li></li> 
 
      <li></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <!--.banner-acti--> 
 
    </a> 
 
    <!--effetto all'hover--> 
 
    <div class="ct-hove"> 
 
    <div class="text-pro"> 
 
     <p class="text">I</p> 
 
     <p class="text">I</p> 
 
     <p class="tex">I</p> 
 
    </div> 
 
    <ul> 
 
     <li class="compare-icon"><a href="#"><i class="fa fa-eye"></i></a> 
 
     </li> 
 
     <li class="buy-icon"><a href="#"><i class="fa fa-heart-o"></i></a> 
 
     </li> 
 
     <li class="wishlist-icon"><a href="#"><i class="fa fa-database"></i></a> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
    <!--.ct-hover--> 
 

 
    <div class="ct-descript-prod-left"> 
 
    <p class="title-prod">Name</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 
 
    </div> 
 
    <!--.ct-descript-pro-bt--> 
 
    <div class="ct-descript-prod-right"> 
 
    <h4>€ 0.000.00</h4> 
 
    <ul> 
 
     <li class="imgLink" data-target="#"> 
 
     <a href="#"> 
 
      <img src=""> 
 
     </a> 
 
     </li> 
 
     <li class="imgLink" data-target="#"> 
 
     <a href="#"> 
 
      <img src=""> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!--.ct-descript-pro-bt--> 
 
</li>

Answer 1

вы ищете что-то подобное ?

\t $('.carousel').mouseleave(function(){ 
 
\t \t var currentActiveImage = $('.item-show'); 
 
\t \t var nextActiveImage = currentActiveImage.next(); 
 

 
\t \t if(nextActiveImage.length == 0) 
 
\t \t { 
 
\t \t \t nextActiveImage = $(".carousel #item").first(); 
 
\t \t } 
 
\t \t currentActiveImage.removeClass('item-show').addClass('item-hidden'); 
 
\t \t nextActiveImage.addClass('item-show').removeClass('item-hidden'); 
 
\t });

.item-show { 
 
    display: inline-block; 
 
} 
 
.item-hidden{ 
 
    display: none; 
 
} 
 

 
.info { 
 
    position:absolute; 
 
    top: 231px; 
 
    left: 505px; 
 
    background: grey; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <div id="item" class="item-show"> 
 
    <img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" /> 
 
    <div class="info"> 
 
     <span>some text</span> 
 
     <p>Price: 88$</p> 
 
    </div> 
 
    </div> 
 
    <div id="item" class="item-hidden"> 
 
    <img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" /> 
 
    <div class="info"> 
 
     <span>This is Cool</span> 
 
     <p>Price: 99$</p> 
 
    </div> 
 
    </div> 
 
    <div id="item" class="item-hidden"> 
 
    <img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/> 
 
    <div class="info"> 
 
     <span>This is train</span> 
 
     <p>Price: 100$</p> 
 
    </div> 
 
    </div>

Answer 2

Простейшее решение, которое я нашел для вас:

$(document).ready(function() { 
 
    var timeout; 
 
    
 
    var flipImages = function($container) { 
 
    var amount = $container.data("amount"); 
 
    var current = $container.data("current"); 
 
    
 
    if(current >= amount){ 
 
     current = 1; 
 
    } else { 
 
     current = current + 1; 
 
    } 
 

 
    var dataAttr = "image" + current; 
 
    var image = $container.data(dataAttr); 
 
    $container.fadeOut(200, function() { 
 
     $container.css("background-image", "url(" + image + ")"); 
 
     $container.fadeIn(200); 
 
     $container.data("current", current); 
 
    }); 
 
    timeout = setTimeout(function() { 
 
     flipImages($container); 
 
    }, 1000) 
 
    }; 
 

 
    $(".ct-image").hover(
 
    function() { 
 
     var $that = $(this); 
 
     timeout = setTimeout(function() { 
 
     flipImages($that); 
 
     }, 1000) 
 
    }, 
 
    function() { 
 
     if(timeout) { 
 
     clearTimeout(timeout); 
 
     } 
 
    } 
 
); 
 
});

.ct-image { 
 
    display: block; 
 
    height: 300px; 
 
    width: 300px; 
 
}

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

 
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)" 
 
data-image1="http://dummyimage.com/300x300/00eb1b/fff" 
 
data-image2="http://dummyimage.com/300x300/0c00eb/fff" 
 
data-image3="http://dummyimage.com/300x300/eb8500/fff" 
 
data-image4="http://dummyimage.com/300x300/eb0014/fff" 
 
data-current="1" 
 
data-amount="4"> 
 
<!-- your content--> 
 
</div>

Примечание. Решение без переворачивания анимации. Это требует изменения структуры вашего кода.