2009-07-23 8 views
0

を設定画像をホバーこれまでのところ、私は私が何をしたいのかを表示し、txtファイルを経由して画像を読み込む、jCarouselの問題 - 不透明度は

するjCarouselを持っているには、ときに、ユーザープットその後、一度に4枚の画像を示しています1つは画像上のマウス、もう1つは3つの画像で不透明にフェードインし、30%になります。彼らはそれに次の画像にマウスを移動した場合、私は、その画像が100%の不透明度と他の3枚の画像の30%の不透明度になりたいです。

それが際立っているので、だから、上にマウスを持つイメージは、常に、100%の不透明度、その他30%となります。ユーザーがjCarouselボックスからマウスを動かすと、すべての画像に100%の不透明度が表示されます。私はこの

のおかげのようなコードを使用してい

編集

私は前にコードを追加している必要があります申し訳ありませんが、ここにある:http://pastebin.com/m54cd73d8 これは、これまで私が持っているものの作品のnickrance.co.uk/jcarousel/dynamic_ajax.html それの一種です、それが非アクティブなイメージのフェード、私はそれはマウスがjCarouselのdiv要素の外に移動したときにすべての画像の不透明度を復元するために、マウスアウトイベントを必要だと思います。他の人が何もしていないようだ、 はまた、それだけで最初の4枚の画像のために働いているようだ、と私はカルーセルで10枚の画像があります。■

新しい現在のコード: これまで



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

... 1への不透明度をフェードします。それを投稿するか、問題を解決する答えを期待しないでください。 – Sneakyness

+0

コードを追加 - 申し訳ありませんが前にこれを追加している必要がありますhttp://pastebin.com/m54cd73d8! ありがとうございます。 –

答えて

0

は、あなたはあなたにこのコードを追加することができますし、罰金になります:

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

そして、あなたのHTMLは次のようなものでなければなりません。

マウスは、あなたのカルーセルを離れるとき
<div class="jcarousel-wrapper"> 
    <div class="jcarousel"> 
     <ul id="mycarousel"> 
      <li>... 

その後、すべての画像は、私たちは、あなたの正確なコードを参照する必要が

関連する問題