jquery变量在单击时更改,不识别If..Else语句中的变量
我有一个可点击的条,点击后使用Jquery的.animate功能移动三个单独的框 当再次单击时,我需要相同的按钮来反转动画。我仍然是Jquery的noob,所以我确信这是一个简单的范围问题,但我无法理解 Jquery:jquery变量在单击时更改,不识别If..Else语句中的变量,jquery,onclick,transitions,Jquery,Onclick,Transitions,我有一个可点击的条,点击后使用Jquery的.animate功能移动三个单独的框 当再次单击时,我需要相同的按钮来反转动画。我仍然是Jquery的noob,所以我确信这是一个简单的范围问题,但我无法理解 Jquery: // Show More Copy $('.copy-more').click(function(){ var _toggle = 0; var _header; var _sum; var _full; var _opacity;
// Show More Copy
$('.copy-more').click(function(){
var _toggle = 0;
var _header;
var _sum;
var _full;
var _opacity;
var _text;
if ( _toggle === 0) {
_header = 120;
_sum = 150;
_full = 220;
_opacity = 1;
_text = "Read Less";
_toggle = 1;
}
else {
_header = 310;
_sum = 345;
_full = 420;
_opacity = 0;
_text = "Read More";
_toggle = 0;
}
$('.slide-header').animate({'top': _header}, 150);
$('.copy-sum').animate({'top': _sum}, 250);
$('.copy-full').animate({'top': _full, 'opacity': _opacity}, 500);
$('.copy-more').animate({'opacity': 0}, 500, function () {
$(this).text(_text);
}).animate({'opacity': 1}, 500);
});
\u切换
在范围内定义。单击
范围。需要进一步确定其范围,才能使其发挥作用:
// Move _toggle to here
var _toggle = 0;
$('.copy-more').click(function(){
var _header;
var _sum;
var _full;
var _opacity;
var _text;
if ( _toggle === 0) {
_header = 120;
_sum = 150;
_full = 220;
_opacity = 1;
_text = "Read Less";
_toggle = 1;
}
else {
_header = 310;
_sum = 345;
_full = 420;
_opacity = 0;
_text = "Read More";
_toggle = 0;
}
$('.slide-header').animate({'top': _header}, 150);
$('.copy-sum').animate({'top': _sum}, 250);
$('.copy-full').animate({'top': _full, 'opacity': _opacity}, 500);
$('.copy-more').animate({'opacity': 0}, 500, function () {
$(this).text(_text);
}).animate({'opacity': 1}, 500);
});
但是,您应该仔细研究,而不是-更干净的Jquery toggle()将满足您的要求。您无需在使用.toggle()时检查任何标志
看看JSFIDLE演示。另请参阅文档以获取更多参考。谢谢!我知道这是一个范围问题。我本来打算使用CSS动画,但它们与封装所有这些元素的幻灯片脚本冲突。再次感谢!
$('#target').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});