2009-05-23 7 views
1

jamやサムネイルでウェブサイトを操作しています。Jquery - マウスオーバー - フェードイン/アウト//クリック - >不透明度100%//他のクリック - >不透明度60

ページが読み込まれると、すべてのサムネイルが不透明度の60%になっている必要があります。マウスで親指を動かすとすぐに100%にフェードする必要があります。マウスで動かすと、サムネイルは不透明度の60%で退色する必要があります。

ユーザーがサムネイルをクリックすると、100%の不透明度を維持する必要があります。ユーザーが別のサムネイルをクリックすると、「古い」サムネイルは60%にフェードバックし、「新しい」サムネイルは100%にとどまります。 (マウスの上にマウスを置くので、すでに100%の不透明度があります)。

これは、これまで私が持っているコードです:

$(window).bind("load", function() { 
$("#mycarousel li").fadeTo(1, 0.6); 

$("#mycarousel li").hover(function(){ 
    $(this).fadeTo(350, 1.0); 
    $(this).addClass('Active'); 
    },function(){ 
    $("this:not('.Active')").fadeTo(350, 0.6); 
}); 
}); 

任意の助けをいただければ幸いです。

Greatings、 バ

答えて

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

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

    $(thumbs).hover(
     function(){ 
      $(this).fadeTo(fadeTime, activeOpacity); 
     }, 
     function(){ 
      // Only fade out if the user hasn't clicked the thumb 
      if(!$(this).hasClass(clickedClass)) { 
       $(this).fadeTo(fadeTime, inactiveOpacity); 
      } 
     }); 
    $(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

は私を助けてどうもありがとうございます! – Bas

+0

うれしかったです。また、それが解決されたことを示すために適切に機能している場合は、この回答を受け入れることを検討することもできます。ありがとう=) – PatrikAkerstrand

関連する問題