question jCarousel - Passez la souris paramètres opacité des images

Question

Jusqu'à présent, j'ai jCarousel pour afficher et charger les images via un fichier txt,

Ce que je veux faire est de montrer 4 images à la fois, puis lorsque le met utilisateur la souris sur 1 des images les 3 autres images pour fondre l'opacité, à 30%. Ensuite, s'ils déplacent la souris sur l'image à côté, je veux que cette image soit à 100% d'opacité et les 3 autres images à 30% d'opacité. Donc, l'image avec la souris au dessus sera toujours à 100% d'opacité, et les autres à 30%, donc elle se démarque. Lorsque l'utilisateur déplace la souris hors de la boîte jCousousel, toutes les images doivent afficher une opacité de 100%.

J'utilise un code similaire à celui-ci

Merci.

Modifier

Désolé j'aurais code ajouté avant, la voici: http://pastebin.com/m54cd73d8 C'est ce que j'ai jusqu'à présent nickrance.co.uk/jcarousel/dynamic_ajax.html Il genre de travaux, il estompe les images inactives, mais je pense qu'il a besoin d'un événement mouseout pour restaurer l'opacité de toutes les images lorsque la souris sort de la div jCarousel. En outre, il semble être que travailler pour les 4 premières images, et je 10 images dans le carrousel, les autres ne semblent pas faire quoi que ce soit: s

Nouveau code actuel: Jusqu'à présent

    
$(window).bind("load", function() { 
    var activeOpacity = 1.0, 
     inactiveOpacity = 0.3, 
     testOpacity = 0.3, 
     fadeTime = 50, 
     clickedClass = "selected", 
     thumbs = "#mycarousel li"; 

    $(thumbs).fadeTo(1.0, activeOpacity); 

    $(thumbs).hover(
     function(){ 

      $(thumbs).fadeTo(fadeTime, inactiveOpacity); 

      $(this).fadeTo(fadeTime, activeOpacity); 
     }, 
     function(){ 
      // Only fade out if the user hasn't clicked the thumb 
      if(!$(this).hasClass(clickedClass)) { 
       $(this).fadeTo(fadeTime, activeOpacity); 
      } 
     }); 
    $(thumbs).click(function() { 
     // Remove selected class from any elements other than this 
     var previous = $(thumbs + '.' + clickedClass).eq(); 
     var clicked = $(this); 
     if(clicked !== previous) { 
      previous.removeClass(clickedClass); 
     } 
     clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity); 
    }); 
}); 
    

Answer 1

vous pouvez ajouter ce code à la vôtre et vous serez bien:

$(".jcarousel-wrapper").on('mouseleave', function(){ 
    $(thumbs).fadeTo(fadeTime, 1.0); 
}); 

et votre code HTML doit être quelque chose comme ceci:

<div class="jcarousel-wrapper"> 
    <div class="jcarousel"> 
     <ul id="mycarousel"> 
      <li>... 

Ensuite, toutes les images vont disparaître l'opacité à 1 lorsque la souris laisser votre carrousel ...