jquery - 在切换 div 上更改图像

Question

我有 THIS它在更改主 div 的宽度的同时为另一个 div 设置动画。现在，我想切换图像。我怎样才能做到这一点？ HTML:

      <button id="showmenu" type="button"><img id="icon" src="http://www.rizwanashraf.com/wp-content/uploads/2010/04/twitter-bird-v2.jpg" /> </button>         
     <div id="sidemenu" class="sidemenu">
       <div id="innermenu" class="innermenu">
         <div class="sidebarmenu">
               This should go left
         </div>
       </div>
     </div>
     <div class="table">
         content
    </div>

jQuery:

$(document).ready(function() {
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
    if(hidden){
    $('.sidemenu').animate({
        width: '200px'
    },500);
    $('.table').animate({
        width: '300px'
    },500)
} else {
    $('.sidemenu').animate({
        width: '0px'
    },500);
     $('.table').animate({
        width: '500px'
    },500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);

});
}); 

CSS:

  .sidemenu {
  float:left;
  overflow: hidden;
  width: 200px;
  height: 500px;
}
#icon{
height:20px;
width:30px;
}
.innermenu {    
  height: 100%;
  width: 200px;
  background: #bcc1cb;
}

.sidebarmenu {
height: 100%;
}

.table{
height:500px;
width:300px;
background:pink;
float:left;
left:20px;
z-index: 10;
}

Answer 1

把它放在你想改变图像的地方

$('#icon').attr('src', 'YOUR IMAGE.jpg');

这将改变图像的 SRC 属性。

示例 JSFiddle