Изменить изображение на переключателе 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

Answer 2

Попробуйте $ ('#') значок SRC = новое изображение на событие щелчка.

Answer 3

Попробуйте

top.$('.sidemenu').toggle(function() { 
    $(this).animate({ 
width: '200px'  
    }, 500); 

Answer 4

Вы можете изменить СРК изображения в соответствии примере ниже, или если вы хотите немного больше гибкости просто переключить класс CSS и имеют детали изображения в CSS ,

$(document).ready(function() { 
$('#showmenu').click(function() { 
    var hidden = $('.sidebarmenu').data('hidden'), 
     icon = $(this).find("img#icon"), 
     imageSrc = "http://www.rizwanashraf.com/wp-content/uploads/2010/04/twitter-bird-v2.jpg", 
     imageAltSrc = "http://placekitten.com/32/32"; 

    if (hidden) { 
     icon.attr("src", imageSrc); 
     $('.sidemenu').animate({ 
      width: '200px' 
     }, 500); 
     $('.table').animate({ 
      width: '300px' 
     }, 500) 
    } else { 
     icon.attr("src", imageAltSrc); 
     $('.sidemenu').animate({ 
      width: '0px' 
     }, 500); 
     $('.table').animate({ 
      width: '500px' 
     }, 500) 
    } 
    $('.sidebarmenu,.image').data("hidden", !hidden); 

}); 

});

http://jsfiddle.net/a2v5J/33/