JQuery Hide/Show - Несколько Divs (по одному)

Это тот момент, когда я нахожусь!JQuery Hide/Show - Несколько Divs (по одному)

$('#img-expand').click(function() { 
$('[id^="work-info"]').not('#work-info').hide(); 
$("#work-info").slideToggle("slow"); 
}); 
$('#img-expand_2').click(function() { 
$("#work-info").slideToggle("slow"); 
$('[id^="work-info"]').not('#work-info_2').hide(); 
$("#work-info_2").slideToggle("slow"); 
});

http://jsfiddle.net/vk7AE/8/

Это очень близко к тому, что я ищу. Индивидуально они работают идеально с точки зрения вертикального скольжения. Однако, когда текст для изображения1 отображается, а изображение 2 нажимается, текст срывается и исчезает, а затем текст для изображения2 появляется на экране (наоборот).

На что я смотрю, когда отображается текст изображения1, а изображение2 нажимается, текст изображения1 сместится (исчезает с экрана), а затем текст для изображения2 скользит вниз с того же места. (наоборот)

источник

2013-11-14 Daniel

Как говорит Мэтью, второй параметр, который работает после завершения слайда, равен key.

Для того, чтобы сконденсировать код в одну функцию я изменил свой image-expand идентификатор в image-expand_1 и то же самое с вашей рабочей информации work-info_1

$("[id^=img-expand]").click(function() { 
    var clickedImg = $(this); 
    if($('[id^="work-info"]').not('#work-info'+$(this).attr('id').substring($(this).attr('id').indexOf('_'))).is(':visible')) 
    $('[id^="work-info"]:visible').slideUp("slow",function(){ 
     $('#work-info'+clickedImg.attr('id').substring(clickedImg.attr('id').indexOf('_'))).slideDown("slow"); 
    }); 
    else 
     $('#work-info'+clickedImg.attr('id').substring(clickedImg.attr('id').indexOf('_'))).slideToggle("slow");  
});

Скрипки

http://jsfiddle.net/vk7AE/51/

источник

2013-11-14 20:59:17 Trevor

Спасибо за ваш ответ! Когда я пытаюсь добавить больше элементов в HTML, эффекты slideUP и SlideDown теряются, в идеале, что я ищу, это всего четыре элемента с тем же эффектом, что и у вас есть в answer.http: //jsfiddle.net/ vk7AE/49/ – Daniel

@ Даниэль проверяет мой обновленный ответ. – Trevor

slideToggle() функция принимает второй параметр, который будет работать после завершения скольжения. Так что вам нужно сделать, это иметь второй текст скользить вниз после того, как первый делает, называя его внутри этой функции

http://jsfiddle.net/vk7AE/10/

источник

2013-11-14 20:59:42

JQuery Hide/Show - Несколько Divs (по одному)

ответ

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