admin管理员组文章数量:1025293
I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:
First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.
Fifth click: All the previous action should be repeated.
This is what I've got up till now, but After my fourth click nothing happens anymore:
$(function(){
var hits = [0];
$('.kaart-uitklappen').click(function(){...
Fiddle Demo
I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:
First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.
Fifth click: All the previous action should be repeated.
This is what I've got up till now, but After my fourth click nothing happens anymore:
$(function(){
var hits = [0];
$('.kaart-uitklappen').click(function(){...
Fiddle Demo
Share Improve this question edited Sep 13, 2013 at 15:01 Satpal 133k13 gold badges167 silver badges170 bronze badges asked Sep 13, 2013 at 14:59 KlaasvnAKlaasvnA 6311 bronze badges11 Answers
Reset to default 5You don't need as many animate calls, as you basically just change the height modifier. As there are four states essentially (two for going up, two for going down), you need to reset the counter accordingly (i.e., when it reaches 4) - that's done easily with modulo operator.
$(function(){
var hits = -1;
$('.kaart-uitklappen').click(function(){
hits = (hits+1) % 4;
var modifier = hits > 1 ? '-' : '+';
$('#header').animate({height: modifier + '=100px' }, 300);
return false;
});
});
JSFiddle.
You need to make sure your value does not exceed 3, or nothing will happen on subsequent clicks. Also, you should start with your value equal to 0, not [0].
Here is some simplified code with these ideas incorperated: http://jsfiddle/XZ7mW/16/
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits < 2)
$("#header").animate({'height':'+=100px' }, 300);
else
$("#header").animate({'height':'-=100px' }, 300);
hits = (hits + 1) % 4;
return false;
});
change from hits == number to hits%4 == number
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits%4 == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
if (hits%4 == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
hits++;
return false;
});
});
You need to reset your var to 0 once you get to 3 -
if (hits == 3)
{
$("#header").animate({'height':'-=100px' }, 300, function() {});
hits = -1;
}
You also shouldn't be using an array to store hits.
hits = [0]
should be
hits = 0;
http://jsfiddle/XZ7mW/10/
On the last if type in this
$("#header").animate({'height': '-=100px'}, 300, function () {});
hits = 0;//make hits 0
return;//return so it doesnt add to hits
}
DEMO
JAVASCRIPT :
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300);
}
else {
$("#header").animate({
'height': '-=100px'
}, 300);
hits = 0;
return false;
}
hits++;
return false;
});
});
Fiddle : http://jsfiddle/XZ7mW/12/
Here you go : JSFiddle
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits++;
}
else if (hits == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits = 0;
}
return false;
});
});
You need to reset hits when it reaches 3
Assuming you want this to expand, contract and then re-expand:
var hits = [0]; should be var hits = 0; and you will need to test for hits > 3 and set it back to 0;
or use modulus arithmetic in your conditions:
http://jsfiddle/XZ7mW/19/
$(function(){
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits % 4 == 0) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 1) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 2) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
if (hits % 4 == 3) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
hits++;
return false;
});
});
Here's how I would do it:
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits < 2)
$("#header").animate({'height': '+=100px'}, 300);
else
$("#header").animate({'height': '-=100px'}, 300);
if (++hits == 4)
hits = 0;
return false;
});
http://jsfiddle/KX7aq/
Add this at the end to reset the counter:
if(hits==4) {
hits=0;
}
http://jsfiddle/XZ7mW/7/
Can be something like this?
var direction = "open";
$('.kaart-uitklappen-button').click(function(){
if (direction == "open"){
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()+100)
if ($('.kaart-uitklappen').height() >= 200){
direction = "close";
}
}else{
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()-100)
if ($('.kaart-uitklappen').height() <= 0){
direction = "open";
}
}
I use kaart-uitklappen-button because you can't click the container if it is closed...
I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:
First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.
Fifth click: All the previous action should be repeated.
This is what I've got up till now, but After my fourth click nothing happens anymore:
$(function(){
var hits = [0];
$('.kaart-uitklappen').click(function(){...
Fiddle Demo
I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:
First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.
Fifth click: All the previous action should be repeated.
This is what I've got up till now, but After my fourth click nothing happens anymore:
$(function(){
var hits = [0];
$('.kaart-uitklappen').click(function(){...
Fiddle Demo
Share Improve this question edited Sep 13, 2013 at 15:01 Satpal 133k13 gold badges167 silver badges170 bronze badges asked Sep 13, 2013 at 14:59 KlaasvnAKlaasvnA 6311 bronze badges11 Answers
Reset to default 5You don't need as many animate calls, as you basically just change the height modifier. As there are four states essentially (two for going up, two for going down), you need to reset the counter accordingly (i.e., when it reaches 4) - that's done easily with modulo operator.
$(function(){
var hits = -1;
$('.kaart-uitklappen').click(function(){
hits = (hits+1) % 4;
var modifier = hits > 1 ? '-' : '+';
$('#header').animate({height: modifier + '=100px' }, 300);
return false;
});
});
JSFiddle.
You need to make sure your value does not exceed 3, or nothing will happen on subsequent clicks. Also, you should start with your value equal to 0, not [0].
Here is some simplified code with these ideas incorperated: http://jsfiddle/XZ7mW/16/
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits < 2)
$("#header").animate({'height':'+=100px' }, 300);
else
$("#header").animate({'height':'-=100px' }, 300);
hits = (hits + 1) % 4;
return false;
});
change from hits == number to hits%4 == number
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits%4 == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
if (hits%4 == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
hits++;
return false;
});
});
You need to reset your var to 0 once you get to 3 -
if (hits == 3)
{
$("#header").animate({'height':'-=100px' }, 300, function() {});
hits = -1;
}
You also shouldn't be using an array to store hits.
hits = [0]
should be
hits = 0;
http://jsfiddle/XZ7mW/10/
On the last if type in this
$("#header").animate({'height': '-=100px'}, 300, function () {});
hits = 0;//make hits 0
return;//return so it doesnt add to hits
}
DEMO
JAVASCRIPT :
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300);
}
else {
$("#header").animate({
'height': '-=100px'
}, 300);
hits = 0;
return false;
}
hits++;
return false;
});
});
Fiddle : http://jsfiddle/XZ7mW/12/
Here you go : JSFiddle
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits++;
}
else if (hits == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits = 0;
}
return false;
});
});
You need to reset hits when it reaches 3
Assuming you want this to expand, contract and then re-expand:
var hits = [0]; should be var hits = 0; and you will need to test for hits > 3 and set it back to 0;
or use modulus arithmetic in your conditions:
http://jsfiddle/XZ7mW/19/
$(function(){
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits % 4 == 0) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 1) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 2) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
if (hits % 4 == 3) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
hits++;
return false;
});
});
Here's how I would do it:
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits < 2)
$("#header").animate({'height': '+=100px'}, 300);
else
$("#header").animate({'height': '-=100px'}, 300);
if (++hits == 4)
hits = 0;
return false;
});
http://jsfiddle/KX7aq/
Add this at the end to reset the counter:
if(hits==4) {
hits=0;
}
http://jsfiddle/XZ7mW/7/
Can be something like this?
var direction = "open";
$('.kaart-uitklappen-button').click(function(){
if (direction == "open"){
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()+100)
if ($('.kaart-uitklappen').height() >= 200){
direction = "close";
}
}else{
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()-100)
if ($('.kaart-uitklappen').height() <= 0){
direction = "open";
}
}
I use kaart-uitklappen-button because you can't click the container if it is closed...
本文标签： javascriptExpand a div element multiple timesStack Overflow
版权声明：本文标题：javascript - Expand a div element multiple times - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745617183a2159361.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论