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

时间:2015-09-21 15:31:38

标签: javascript jquery html

我的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">

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

1 个答案:

答案 0 :(得分:0)

尝试使用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;}

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