javascript - 悬停淡入淡出，单击后保持稳定

Question

我正在尝试做一些看似非常简单但没有运气的事情来弄清楚如何将我已有的代码与我想要的微小细节结合起来。

我有调用充满文本的 div 的图像链接。我需要图像在悬停时完全淡入，并在单击后保持完全不透明，除非有人单击不同的图像。

我的文本 div 淡入脚本使它们漂亮地淡入，这就是为什么我保留我以前使用过的这段代码的原因......但是我愿意将它与 淡入一起啮合悬停并停留在我需要整理的样式或脚本中，或者完全更改 JQuery 脚本，以便所有内容以正确的方式协同工作。

这是我的图像按钮的代码。

<bioimage1><a href="javascript:showDiv('biotext1')" class="fade"><img src="update_feb_2014/bio_images/1.jpg" width="115" height="115" border="0"/></a></bioimage1>

这是我用来使我的图像在悬停时淡入淡出的 CSS 类:

.fade {
opacity: 0.5;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 1;
  }

这是控制文本 div 淡入的 JQuery/Javascript:

$(document).ready(function() {
        var option = 'biotext2';
        var url = window.location.href;
        option = url.match(/option=(.*)/)[1];
        showDiv(option);
});
    function showDiv(option) {
        $('.hidden').fadeOut(700);   
        $('#' + option).fadeIn(700);
        $('#biotextmain').fadeOut(700);   
    }

    $(function(){ 
        $('#' + option).fadeIn(700);
        });

这是淡入的 15 个文本 div 之一的示例:

<div id="biotext1" class="hidden">1 this is my bio this is my bio This is my bio</div>

我认为这涵盖了它。非常感谢您的帮助!

Answer 1

你可以尝试类似的东西

<bioimage1>
    <a data-target="biotext1" href="#" class="fade">
        <img src="update_feb_2014/bio_images/1.jpg" width="115" height="115" border="0"/>
    </a>
</bioimage1>

<div id="biotext1" class="hidden">
    1 this is my bio this is my bio This is my bio
</div>

然后

$(document).ready(function () {
    var $hiddens = $('.hidden');
    var option = 'biotext2';
    var $fades = $('.fade').click(showDiv);

    //var url = window.location.href;
    //option = url.match(/option=(.*)/)[1];
    $fades.filter('[data-target="' + option + '"]').click();


    function showDiv() {
        var $this = $(this),
            option = $this.data('target');
        $fades.removeClass('clicked')
        $this.addClass('clicked');
        $hiddens.fadeOut(700);
        $('#' + option).fadeIn(700);
        $('#biotextmain').fadeOut(700);
    }

});

和

.fade {
    opacity: 0.5;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover, .fade.clicked {
    opacity: 1;
}
.hidden {
    display:none
}

演示:Fiddle