Question

我正在使用div中的一堆图像，当页面加载时，所有缩略图都是不透明度的30％。一旦你用鼠标滑过拇指，它会逐渐消失到100％，如果你用鼠标移动缩略图，它会在30％的不透明度上消失。这一点有效。

现在，当用户点击缩略图时，它必须保持100％的不透明度。一旦用户点击另一个缩略图，“旧”缩略图必须逐渐淡出30％，而“新”缩略图必须保持100％。这个位是问题，当我点击一个新图像时，旧图像不会恢复到30％但保持100％

代码信用：PatrikAkerstrand

有人可以帮忙吗？代码如下：

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.3,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#boardDirectorsImage img";

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

HTML中列出的图片：

<div id="pageBodyContainerRight">
            <div id="boardDirectorsImage"><img src="images/bod_image1a.jpg" width="171" height="168" id="bod1" class="bod1" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image2a.jpg" width="171" height="168" id="bod2" class="bod2" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image3a.jpg" width="171" height="168" id="bod3" class="bod3" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image4a.jpg" width="169" height="168" id="bod4" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image5a.jpg" width="171" height="168" id="bod5" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image6a.jpg" width="171" height="168" id="bod6" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image7a.jpg" width="171" height="168" id="bod7" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image8a.jpg" width="169" height="168" id="bod8" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image9a.jpg" width="171" height="168" id="bod9" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image10a.jpg" width="171" height="168" id="bod10" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image11a.jpg" width="171" height="168" id="bod11" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image11a.jpg" width="169" height="168" id="bod12" /></div>
        </div>

最后显示数据的另一个脚本：

$( document ).ready(function() {
    $('#bod1').click(); 
});

$('#bod1').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 1</p>'); 
});

$('#bod2').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 2</p>');
});

能做到这一点还是让我想到了？

Answer 1

使用这个jQuery，它会正常工作。

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.3,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#boardDirectorsImage img";

    $(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
         $(thumbs).removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
       $(this).addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});

鼠标悬停时图像透明度级别淡化，单击时保持100％

1 个答案: