我在Forrst上问了这个问题并收到了两个代码回复。一个工作,一个没工作。我希望有人能够向我解释为什么第二个不起作用。
我的目标是默认隐藏我的搜索。单击搜索图标时,它会将搜索切换为淡入并稍微向左移动。如果再次单击搜索图标,它将淡出并向右移动。
以下是有效的代码:
$(function() {
var search = $('#searchform');
search.css('opacity', 0);
$('#search-img').toggle(function() {
search.animate({opacity: 1}, {queue: false, duration: 'slow'});
search.animate({ left: "-10px" }, 'slow');
},
function() {
search.animate({opacity: 0}, {queue: false, duration: 'slow'});
search.animate({ left: "+10px" }, 'slow');
}
);
});
以下是我点击搜索图标时没有任何反应的代码:
$(function() {
var search = $('#searchform').css('opacity', 0),
i = 0;
$('#search-img').click(function() {
search.animate({opacity: 'toggle', left: i % 2 == 0 ? 0 : -10});
i++;
});
});
有没有人看到第二个代码的问题是什么?
答案 0 :(得分:0)
var i将不可用,因为它不是全局var。要在$()中创建全局内容,只需将其分配给窗口对象即可。
解决方法是:
$(function() {
var search = $('#searchform').css('opacity', 0),
window.i = 0;
$('#search-img').click(function() {
search.animate({opacity: 'toggle', left: i % 2 == 0 ? 0 : -10});
window.i++;
});
});