jCarousel Ausgabe - Hover Bilder Opazitätseinstellungen

Question

Bisher bekam ich habe jCarousel anzuzeigen, und laden Sie die Bilder über eine txt-Datei,

Was ich will zu einem Zeitpunkt 4 Bilder zeigen, dann, wenn der Benutzer puts die Maus über 1 der Bilder die anderen 3 Bilder um die Opazität zu verdecken, bis 30%. Wenn sie dann die Maus auf das Bild neben ihr bewegen, möchte ich, dass das Bild 100% Deckkraft und die anderen 3 Bilder 30% Deckkraft haben.

Also das Bild mit der Maus darüber wird immer 100% Opazität sein, und die anderen 30%, so dass es auffällt. Wenn der Benutzer die Maus aus der jCarousel-Box bewegt, möchte ich, dass alle Bilder eine Deckkraft von 100% aufweisen.

Ich benutze einen ähnlichen Code

Danke.

bearbeiten

Leider habe ich vor Code hinzugefügt haben sollte, hier ist es: http://pastebin.com/m54cd73d8 Das ist, was ich habe bisher nickrance.co.uk/jcarousel/dynamic_ajax.html Es Art arbeitet, Es blendet die inaktiven Bilder aus, aber ich denke, dass es ein mouseout-Ereignis benötigt, um die Deckkraft aller Bilder wiederherzustellen, wenn die Maus aus dem jCarousel div herauskommt. Auch scheint es für die ersten 4 Bilder nur zu arbeiten, und ich habe 10 Bilder in dem Karussell, scheinen die anderen nichts zu tun: s

New Current Code: Bisher

    
$(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

Sie können diesen Code zu Ihnen hinzufügen, und Sie werden in Ordnung sein:

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

und Ihre HTML muss so etwas wie dieses:

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

Dann werden alle Bilder werden Opazität 1 verblassen, wenn die Maus Ihr Karussell verlassen ...