javascript - jCarousel の問題 - ホバー画像の不透明度設定

Question

これまでのところ、jCarousel を表示して、txt ファイル経由で画像をロードしました。

私がやりたいことは、一度に 4 つの画像を表示し、ユーザーが画像の 1 つの上にマウスを置くと、他の 3 つの画像の不透明度が 30% にフェードすることです。次に、マウスをその隣の画像に移動すると、その画像の不透明度が 100% になり、他の 3 つの画像の不透明度が 30% になります。

その上にマウスがある画像は常に 100% の不透明度になり、他の画像は 30% になるため、目立ちます。ユーザーがマウスを jCarousel ボックスの外に移動すると、すべての画像が 100% の不透明度で表示されるようにします。

私はこれに似たコードを使用しています

ありがとう。

編集

申し訳ありませんが、以前にコードを追加する必要がありました。ここにあります: http://pastebin.com/m54cd73d8 これは私がこれまでに持っているものです。しかし、マウスが jCarousel div の外に移動したときにすべての画像の不透明度を復元するには、mouseout イベントが必要だと思います。また、最初の4つの画像でのみ機能しているようで、カルーセルに10枚の画像があり、他の画像は何もしていないようです:s

新しい 現在のコード: 今のところ

 
$(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);
     });
});