鼠标悬停时图像透明度降低，点击保持100％ [英] Image transparency level fade on mouse over and stay 100% on click

问题描述

我正在处理div中的一堆图像，加载页面时，所有缩略图的不透明度为30％.只要将鼠标移到拇指上方，它就会淡入100％；如果将鼠标移出缩略图，则它会变回30％的不透明度.该位有效.

I am working with a bunch of images in a div, When the page is loaded all the thumbnails are 30% of opacity. As soon as you go with your mouse over a thumb it fades to 100%, if you move with your mouse out the thumbnail it fades back up on 30% of opacity. This bit works.

现在，当用户单击缩略图时，它必须保持100％的不透明度.用户单击另一缩略图后，旧"缩略图必须退回到30％，新"缩略图必须保持在100％.这是问题所在，当我单击新图像时，旧图像不会恢复为30％，而是保持在100％

Now when the user clicks on a thumbnail it has to stay at 100% opacity. As soon as the user clicks on another thumbnail, the 'old' thumbnail has to fade back to 30% and the 'new' one has to stay at 100%. This bit is the problem wherein when i click on a new image the old image doesnt revert back to 30% but stays on 100%

代码归功于:PatrikAkerstrand

Code credit to: PatrikAkerstrand

任何人都可以帮忙吗?代码如下:

Can anyone help please? Code is below:

$(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列出的图像:

Images listed in 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>

最后，另一个脚本显示数据:

Finally the other script to show the data:

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

可以做到这一点吗?还是我烦恼了?

Can this be done or am i way in over my head?

推荐答案

使用此jQuery即可正常工作.

Use this jQuery and it will work fine.

$(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％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！