Question

我的jQuery Button有问题。所以我有两个按钮nexButton和bacButton。我将向您展示的代码在nexButton上工作得很完美，但它在bacButton上效果不佳。

（重要！）这是一个视频链接，您可以在其中查看正在发生的事情： https://www.youtube.com/watch?v=A4huQ5CRNc4

正如您所看到的，当我在nexButton上按住鼠标时，它会改变不透明度并保持不变，直到我拿到鼠标按钮。但是当我在bacButton上按住鼠标时，它会改变按钮的不透明度，但它只会变回旧的不透明度（不会发生什么，只是保持不透明度，直到我拿到按钮的鼠标）。

以下是我使用的代码：

$(document).ready(function(){
    $('#nexButton, #bacButton').mouseenter(function(){
        $(this).stop().animate({opacity: '1'},'fast'); 
    });
    $('#nexButton, #bacButton').mouseleave(function(){
        $(this).stop().animate({opacity: '0.7'},'fast'); 
    });
});

我的按钮：

<img id="bacButton" src="arrowhead9%20(2).png">
<img id="nexButton" src="arrowhead9%20(2).png">

有人可以为我修复此代码吗？因为我不能使它工作，我也尝试过其他组合和其他代码。

Answer 1

尝试使用jQuery fadeTo函数

$(document).ready(function(){

    // set fade animation time in ms
    var fadeTime = 250; 

    // set initial opacity
    $('#nexButton, #bacButton').fadeTo(fadeTime, 0.5);

    // change opacity on hover
    $('#nexButton, #bacButton').mouseenter(function(){
        $(this).fadeTo(fadeTime, 1);
    });
    $('#nexButton, #bacButton').mouseleave(function(){
        $(this).fadeTo(fadeTime, 0.5);
    });
});

JSFiddle example

我仍然建议采用CSS方法，因为它是原生的，更可靠的

#nextButton, #bacButton {opacity:0.5; transition:.25;}
#nextButton:hover, #bacButton:hover {opacity:1;}

确保为跨浏览器兼容性添加供应商前缀

脚本只能使用两个按钮之一正常工作

1 个答案: