jqueryのは、私は、画像を切り替えるようにしようとしていますクリックした要素

Question

を切り替えるslideToggle slidetoggleを使用する場合にクリックしました。

私はリンクとその下のdivを持っています。私が表示し、それを隠し、div要素が上下にスライドさせているかどうかに応じて、画像を変更しようとしています。

<a href="#" id="login" src="membersignin2.png"><img src="/templates/stat/img/membersignin.png" alt="Member Sign in"></a> 
<div id="loginDiv" style="display: none; "></div> 

私はjqueryのは、これまでのところ、私は画像を変更する方法を

$('#login').click(function(){ 
    $('#loginDiv').slideToggle('slow',function(){ 
    }) 
}) 

のですか？それに応じてそれらを表示/

$('#login img').attr('src','new source'); 

それとも、あなたのコードに両方の画像を追加することもでき、そして隠す：

Answer 1

あなたは、画像のsrc属性を変更することができます。

Answer 2

はslideToggleのドキュメントが言うように（それが見えるの場合）、この関数は、1つの要素をスライドし、またはそれは隠しだ場合、中にスライドします。あなたが最初に現在表示さだ画像を非表示にするつもりだ後、

$('#login').click(function(){ 

    $('#login img').slideToggle('slow',function(){///callback runs when animation ends 
      $("#login #loginDiv").slideToggle("slow",function(){}); 
      // you use a empty callback because you don't need it for the second slideToggle 
    }) 
    return false; // prevent default link action (so you don't have a extra hash in the URL) 

}) 

Answer 3

$('#login').click(function(){ 
    $(this).contents('img').attr('src','path/to/new/img.jpg'); 
    $('#logindiv').slidetoggle('slow'); 
    return false; 
}); 

（また、あなたはHREF INのdivを移動するつもりたいしているので、セレクタが正しく一致した）他のdivを表示