jquery切换中一个奇怪问题的简单示例
jquery切换中一个奇怪问题的简单示例
提问于 2011-02-12 19:05:37
我试图做一个简单的部分淡出效果使用切换切换两个值之间的不透明度，当一个元素被点击。但是第一次点击什么也做不到！
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á和steweb的解决方案：
$('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;
}
);回答 4
Stack Overflow用户
回答已采纳
发布于 2011-02-12 19:12:26
试试这个，更简单一些：
$('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;
}
);见工作这里
Stack Overflow用户
发布于 2011-02-12 19:19:13
因为绑定到单击事件一次，然后取消绑定，然后通过切换再次绑定到它。为了什么？用开关就行了。这是工作的示例。
Stack Overflow用户
发布于 2011-02-12 19:17:34
甚至更容易不用使用切换：
$('div.toggler').css('opacity', .5).click( function() {
$(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4979997
复制相关文章
相似问题
腾讯云开发者
