有沒有辦法顯示/隱藏在顯示和隱藏同一個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的圖像切換

回答

相關問題