Как переключаться между двумя классами в jquery?

Question

У меня проблема с toggleClass, она не работает должным образом. изображение должно изменяться между show и hide. Это изменение к hide, но не назад

здесь не мой example и некоторый код:

<div class="top_menu_hidden" style="display: none; ">testing</div> 
<div class="show_menu"></div> 

$('.show_menu').on('click', function(){ 
     $('.top_menu_hidden').stop().slideToggle('normal', function(){ 
      $(".show_menu").toggleClass("hide_menu show_menu"); 
     }); 
});​ 

.show_menu{ 
    background: url("http://placehold.it/150&text=show") no-repeat scroll 0 0 transparent; 
    height: 150px; 
    width: 150px; 
} 
.hide_menu{ 
    background: url("http://placehold.it/150&text=hide") no-repeat scroll 0 0 transparent; 
    height: 150px; 
    width: 150px; 
} 

какие-либо идеи?

благодаря

Answer 1

$(".show_menu, .hide_menu").toggleClass("hide_menu show_menu"); 

DEMO

Полный код

$('.show_menu').on('click', function() { 
    $('.top_menu_hidden').stop().slideToggle('normal', function() { 
     $(".show_menu, .hide_menu").toggleClass("hide_menu show_menu"); 
    }); 
}); 

Answer 2

Существует функция переключения, что делает это для вас из коробки:

$(".show_menu").toggle(); 

toggle документы:

Описание: Показать или скрыть соответствующие элементы.