我的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">
有人可以为我修复此代码吗?因为我不能使它工作,我也尝试过其他组合和其他代码。
答案 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);
});
});
我仍然建议采用CSS方法,因为它是原生的,更可靠的
#nextButton, #bacButton {opacity:0.5; transition:.25;}
#nextButton:hover, #bacButton:hover {opacity:1;}
确保为跨浏览器兼容性添加供应商前缀