Javascript 隐藏后照片切换不进入视图

我希望在网页上切换照片/标题。
用户单击后，会出现照片，然后出现标题。
用户再次单击，标题消失，然后照片消失。
用户点击后，照片就会出现，然后是标题

在第三次单击时，照片会快速显示（不设置动画）。 这是我的代码。
（jQuery-1.8.1.min.js）

有什么建议吗？
需要更多的代码吗

更新
为了使图像在每次切换时都具有动画效果，必须对图像进行动画效果

EDIT2
更新了JSFIDLE
编辑：
另一个问题出现了，这次是动画。

---

工作正常，但当与实际图像一起使用时，它在第一个周期后不会产生动画。

编辑3:更新代码以在一个周期后工作：

---

我试图坚持使用您的原始代码（我刚刚在照片停止和动画调用之间添加了.show（）），但我看不出有什么问题。它似乎起作用了

更新：我根据海报的请求更改了“隐藏”功能，并更新了JSFIDLE代码以反映这一点

$(document).ready(function() {
    $('#photo').width(0).height(0).css('opacity', 0);
    $('#caption').hide();
    $('button').toggle(
        function() {
            console.log("show");
            $('#photo').stop().show().animate({
                width: '400px',
                height: '300px',
                opacity: 1
            }, 100, function() {
                $('#caption').stop().fadeIn(1000);
            }); //end animate
        }, 
        function() {
            console.log("hide");
            $('#caption').stop().hide(function(){
                $('#photo').stop().animate({
                    width: '0px',
                    height: '0px',
                    opacity: 0
                }, 100);
            });
        }
    );
});

---

发布HTML和JSFIDLE怎么样？哪个元素应用了内容类？您确定您的切换处理程序正在启动吗？可能会添加一个console.log（“toggle-show”）；到第一个函数和console.log（“toggle-hide”）的末尾；到第二个结尾，然后在web inspector中确认每次单击时处理程序都在执行。@billy和iX3我将元素更改为“html”。目标是用户单击页面上的任意位置，并显示照片/标题/disappear@user1460015显示和隐藏或捕获页面上任何位置的单击事件是否有问题？请参见@iX3，问题是在第一次出现后显示图像。一切捕捉正确，但通过切换循环后，图像不会显示。。。只是标题我想继续使用toggle（）事件。谢谢。它确实有效。但是当我尝试用一个实际的图像时，图像在第一个周期后停止出现。只显示标题。我想知道这是否与缓存或其他事情有关（溢出：隐藏）？请参见下面。。。我让它工作，但动画是避免后的第一个周期，通过我改变了你的按钮，以一个。它起作用了。我看不出我的不在哪里。。。所以图像现在出现了。。。那部分工作正常。谢谢在第一次循环之后，图像会弹出，但完全避免了

动画部分。换句话说，图像只是快速地弹出，淡出，弹出，淡出。动画完全无效。我认为这是因为当你隐藏它时，你没有“缩小”它。我马上就要更新JSFIDLE了。如果你让一个图像“动画化”（或淡出，等等）并且你想重复它，那么你必须“动画化”（或淡出，等等）和它进来时完全一样，这是真的吗？谢谢你的帮助。你可以让它做任何你想做的事。只需意识到，如果将它保持在某个状态（例如，400px宽300px高），然后告诉jQuery将它设置为该状态的动画，它不会做任何事情，因为无需做任何事情（它已经是400px宽300px高）。只要你告诉它，它就会改变。例如，您可能希望重构代码以使用标准转换函数，而不是每次都内联定义它。
$(document).ready(function() {
    $('#photo').width(0).height(0).css('opacity', 0);
    $('#caption').hide();
    $('body').toggle(
        function() {
            $('#photo').stop().show().animate({
                width: '400px',
                height: '300px',
                opacity: 1
            }, 1000, function() {
                $('#caption').stop().fadeIn(1000);
            }); //end animate
        }, 
        function() {
            $('#caption').stop().hide(function(){
                $('#photo').stop().fadeOut();
                $('#photo').width(0).height(0).css('opacity', 0);
            });
        }
    );
});​

$(document).ready(function() {
    $('#photo').width(0).height(0).css('opacity', 0);
    $('#caption').hide();
    $('button').toggle(
        function() {
            console.log("show");
            $('#photo').stop().show().animate({
                width: '400px',
                height: '300px',
                opacity: 1
            }, 100, function() {
                $('#caption').stop().fadeIn(1000);
            }); //end animate
        }, 
        function() {
            console.log("hide");
            $('#caption').stop().hide(function(){
                $('#photo').stop().animate({
                    width: '0px',
                    height: '0px',
                    opacity: 0
                }, 100);
            });
        }
    );
});