Jquery 有没有一种方法可以在显示和隐藏的同一div中使用图像进行显示/隐藏切换

我正在努力显示和隐藏一个div包含的文本，以便能够看到后面的背景图像。我得到了很大的帮助，让我的div移动了一点，并保持我的div在侧面可见

$("#welcome").toggle(
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "+=" + left }, 500);
  $(this).onClick() },
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "-=" + left }, 500);
   }
 );

现在我想我的html图像改变形式隐藏显示

<div id="welcomepicture"> 
<div id="welcome">
 Welcome  some really meaningful text here!

  <p class="arrowfull"><a href="#"> <img class="img-swap"  src="http://housing.ucsc.edu/guide/css/images/hide_off.png" alt="Click to view full image" title="Click to view full image" height="42" width="17"> </a></p>

这里欢迎一些真正有意义的文字！

我不确定是否在javascript中放入.onClick图像交换？还是我要写一个新的变量？ jquery和javascript新手，感谢您的帮助

---

如果您希望在单击“单击查看完整图像”时显示图像，可以在js文件底部添加以下代码：

$('.img-swap').click(function(){
    $('#imageID').show();
});

---

在这段代码中，您可以将#imageID更改为要显示的图像id的id。如果使用类来引用图像而不是id，那么当然会使用“.”而不是“#”。让我知道这是否有帮助，或者您是否正在寻找一些不同的东西。

您可以在切换功能中更改图像的来源。 最好的方法是将您的显示和隐藏放在一个图像中，并使用背景位置在它们之间移动。这样，您将只加载1个图像，而不是2个

$("#welcome").toggle(
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "+=" + left }, 500);
        $('.img-swap').attr('src','show.jpg');
    },
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "-=" + left }, 500);
        $('.img-swap').attr('src','hide.jpg');
    }
);

---

我想我做错的是我的代码中没有.attr，谢谢佩德罗的帮助。