有没有办法显示/隐藏在显示和隐藏同一个div的图像切换

我正在显示和隐藏包含文本的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，感谢您的帮助

http://jsfiddle.net/BeccaAlley/UfsS8/4/

来源

2012-12-10 Becca Alley

您可以在切换功能中更改图像的来源。最好的方法是将你的表演和你的藏品放在一个图像中，并使用背景位置在它们之间移动。这样，你只会加载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'); 
    } 
);

来源

2012-12-10 19:46:39

我认为我做错了没有.attr在我的代码中，谢谢佩德罗的帮助。 –

没问题。快乐的编码！ –

如果您想在图像显示，当你点击“点击查看完整图片”，您可以将以下代码添加至底部您的js文件：

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

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

来源

2012-12-10 19:29:31 ProdigyProgrammer

有没有办法显示/隐藏在显示和隐藏同一个div的图像切换

回答

相关问题