我正在尝试使用切换按钮来实现简单的部分淡入淡出效果，以便在单击元素时在两个值之间切换不透明度。但第一次点击没有任何反应!
html代码:
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>
</body>
</html>
以及js代码:
$(document).ready(function() {
$('div.toggler').click(function(event) {
$(this).unbind('click');
$('div.toggler').toggle(function(event) {
$('div.toggler').css({
'opacity': 0.5
});
alert('0.5');
return false;
}, function() {
$('div.toggler').css({
'opacity': 0.1
});
alert('0.1');
return false;
});
event.preventDefault();
});
});
详细来说，它确实“有效”，但仅在第一次点击之后!所以我需要点击两次才能开始工作!我已经在 Firefox 和 Opera 中尝试过了。
编辑:采用 Marcus Sá 和 Steweeb 的解决方案:
$('div.toggler').toggle(
function(event){
$(this).css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$(this).css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
最佳答案
试试这个，更简单:
$('div.toggler').toggle(
function(event){
$('div.toggler').css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$('div.toggler').css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
查看工作 here
关于javascript - jquery 切换的一个奇怪问题的简单示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4979997/