0

希望这个问题不会太傻……我还是个初学者!

我现在正在尝试建立我的投资组合网站,可以在hellothisis.cc上看到

我的目标是让版权符号在几秒钟内完全不透明度,然后降低到 0.1 的不透明度,我相信我成功地做到了。代码可能是贫民窟,但它有效吗?我还希望它有一个悬停属性,当悬停时将版权符号更改为完全不透明的红色,然后在您移动鼠标时返回淡出的灰色。

到目前为止,这是我的代码,包括版权符号具有的隐藏和单击功能。

<script type="text/javascript">

    $(document).ready(function() {
      $(".name").delay(1000).fadeTo('slow', 0.1, function() {
         $(".name").hover(function() {
             $(this).animate({ opacity: 1 });
             });
      });
    });

    $('.bio').hide();
    $('.name').click(function(){
        $('.bio').fadeToggle(1000);
    });
</script>

我现在的问题是,将鼠标悬停在褪色的灰色上后,即使您将鼠标移开,它仍然保持完全不透明?任何帮助将不胜感激,谢谢!

4

2 回答 2

0

直接绑定,您无需等待延迟+淡入淡出完成(+如果在淡入淡出期间有人将鼠标悬停,它将回到不透明度 1,这在 imo 中更合乎逻辑

 $(".name").on({
          mouseover : function(e) {
                   $(this).stop().animate({ opacity: 1 });
         },
          mouseout : function(e) {
                   $(this).stop().animate({ opacity: 0.1 });
          }
 }).delay(1000).fadeTo('slow', 0.1);

编辑:按顺序排列

于 2013-02-09T08:38:05.407 回答
0

您可以使用:

$(".name").hover(function() {
  $(this).animate({ opacity: 1 });
}, function(){
  $(this).animate({ opacity: .1 });
});

第一个函数在mouseenter事件触发时使用,第二个函数在mouseleave事件被调用时使用。

但是我建议将来考虑事件委托,因为它会更好地为您服务。

于 2013-02-09T08:38:21.390 回答