1

这就是我目前的点！

$('#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 的文本会出现在屏幕上（反之亦然）。

我正在查看的是当显示 image1 文本并单击 image2 时，image1 文本向上滑动（从屏幕上消失），然后 image2 的文本从完全相同的位置向下滑动。（反之亦然）

4

2 回答 2

1

该slideToggle()函数接受第二个参数，该参数将在滑动完成后运行。因此，您需要做的是通过在该函数中调用第二个文本在第一个文本之后向下滑动

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

于 2013-11-14T20:59:42.243 回答
0

正如 Matthew 所说，幻灯片完成后函数运行的第二个参数是key.

为了将代码压缩为一个函数，我将您的image-expandid 更改为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-14T20:59:17.560 回答