JQuery анимацию DIV вверх вниз по щелчку

Так что у меня этот HTMLJQuery анимацию DIV вверх вниз по щелчку

<div id="one">One</div> 
<div id="two">Two <br/> <br/> 
    Two 
</div> 
<div id="three">Three</div> 
<div id="four">Four <br/> <br/> 
    Four <br/> <br/> 
    Four 
</div>

JQuery:

$(document).ready(function() { 
    $("#two").hide(); 
    $("#four").hide(); 
    $("#one").click(function() { 

     $("#four").slideUp("slow", function() { 

     }); 
     $("#three").slideToggle("slow,", function() { 

     }); 

     $("#two").slideToggle("slow", function() { 

     }); 
    }); 

    $("#three").click(function() { 
     $("#four").slideToggle("slow,", function() {}); 
    }); 
});

То, что я пытаюсь сделать, это показать DIV один и три один под другим.

Когда я нажимаю div один, я хочу div два, чтобы показать (оживить), и div три (и div four, если div три тоже нажал), чтобы переместить позицию под div два (с той же анимацией).

Когда я снова нажимаю div один, я хочу, чтобы div two спрятал (оживить) и div три (и div four, если div три щелкнули), чтобы вернуться в прежнее положение.

Вот JSFiddle:http://jsfiddle.net/6ynnR/

источник

2014-01-23 naou

Это поможет, если вы включили jQuery в скрипку - это ваша проблема;) http://jsfiddle.net/6ynnR/ –

Спасибо за это. Тем не менее, моя проблема заключается в том, что div three и div four hide, когда я нажимаю div div. Я хочу, чтобы они оба переместились под div two после того, как нажал один div, а затем вернитесь назад, когда снова нажат div one – naou

Похоже, вы хотите что-то вроде этого: EXAMPLE HERE

Обновлено JQuery:

$("#two, #four").hide(); 

$("#one").click(function() { 
    $("#two").slideToggle(function() { 
     $("#four").slideUp(); 
    }); 
}); 

$("#three").click(function() { 
    $("#four").slideToggle(function() { 
     $("#two").slideUp() 
    }); 
});

Кроме того, здесь другой подход: EXAMPLE HERE

источник

2014-01-23 00:34:14

Просто удалите следующий код, и вы хорошо идти: D

$("#four").slideUp("slow", function() { 

    }); 
    $("#three").slideToggle("slow,", function() { 

    });

источник

2014-01-23 00:35:36 rd87

Я надеюсь, что это будет работать для вас,

Я добавил условный оператор:

if(($("#two").is(":visible"))&&($("#four").is(":visible"))){ 

     $("#four").slideToggle("slow,", function() {}); 
     $("#two").slideToggle("slow,", function() {}); 

    }

и удалены две функции :

$("#four").slideUp("slow", function() { 
    }); 

$("#three").slideToggle("slow,", function() { 
    });

http://jsfiddle.net/uY73z/19/

источник

2014-01-23 01:04:18 amaro

JQuery анимацию DIV вверх вниз по щелчку

ответ

Смежные вопросы