jQuery幻灯片和显示/隐藏div

时间:2011-09-18 22:20:00

标签: jquery if-statement show-hide slide

http://jsfiddle.net/VCUz4/1/

以上是我正在设计的网站的一部分。通常的jQuery幻灯片函数工作正常,但我想更进一步。

单击其中一个版本图像后,div会显示更大的图稿,跟踪列表和其他一些信息。如果单击另一个版本打开它,我希望隐藏旧部分,并立即替换它。在那一刻我遇到了我的jQuery问题。

如果.length> 1内容按我的意愿显示,但如果它为0,则初始内容不会滑动,它只是出现但您可以在版本之间切换。这是我第一次尝试创建自己的脚本,因为你可以告诉并且说实话,只是让部分相互滑动或向下滑动的原始实现已经足够但我想要更好地完成我的工作。感谢

1 个答案:

答案 0 :(得分:1)

我认为你只需要改变你的状况:

$(document).ready(function() {    

    $('#amy, #harris').hide();                        

    $('#link2').click(function() {
        if ($("#harris").is(":visible")) {
            $("#harris").hide();
            $("#amy").show();
        }
        else $('#amy').slideDown(500);

        return false;
    });

    $('#link1').click(function() {
        if ($("#amy").is(":visible")) {
            $("#amy").hide();
            $("#harris").show();
        }
        else $('#harris').slideDown(500);

        return false;
    });  

});

不要检查选择器结果的长度。 #harris#amy都始终位于DOM中,因此始终会输入真实条件。

更新了示例http://jsfiddle.net/uwmtN/