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

我的建议是在点击时删除你的.fade类。你的行为是在那个钩子上，所以它应该做你想要的。此外，将默认的CSS不透明度附加到该钩子，您将删除默认的不透明度，这样当鼠标关闭时，图像将不会返回其开始状态。这有帮助吗？

Answer 2

您可以尝试类似

的内容

<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

单击后，悬停淡入保持稳定状态

2 个答案: