Question

我尝试使用jquery添加不透明效果，当我们浏览箭头导航时，似乎没有任何反应:(。你知道我的Jquery脚本有什么问题。

这是我的Jquery：

$(document).ready(function(){
  $(".flscroll").mouseenter(function(){
    $("flscroll").animate({opacity:1},300);
  });
  $(".flscroll").mouseleave(function(){
    $(".flscroll").animate({opacity:.8},300);
  });
});

我在我的css中定义了我的箭头：

.flscroll {
        display:block;
        height: 83px;
        opacity: 0.8;
        position: fixed;
        top: 40%;
        z-index: 1000;
    }
    .ie8 .flscroll {
        filter: alpha(opacity=80);
    }
    #flscrollg {
        background: url(images/sprite.png) no-repeat 50px -100px;
        left: -30px;
        padding-left: 50px;
        width: 52px;
    }
    #flscrolld {
        background: url(images/sprite.png) no-repeat left -200px;
        padding-right: 50px;
        right: -30px;
        width: 53px;
    }

我的html箭头声明就是这样：

<a href="#1" title="previous" class="flscroll" id="flscrollg">&nbsp;</a>
<a href="#1" title="next" class="flscroll" id="flscrolld">&nbsp;</a>

Answer 1

所以我在评论中提到可能是你的Jquery错过了这行代码中的fullstop

$("flscroll").animate({opacity:1},300);
//Should be
$(".flscroll").animate({opacity:1},300);

我已将其添加到此FIDDLE中并且工作正常。

这就是你想要的吗？

Answer 2

试试这个

$(document).ready(function(){
  $(".flscroll").on('mouseenter',function(){
    $(this).animate({opacity:1},300);
  }).on('mouseleave',function(){
    $(this).animate({opacity:0.8},300);
  });
});

jquery动画不透明度箭头mouseenter mouseleave

2 个答案: