Показать/скрыть элемент при наведении с помощью скользящего jQuery

Я немного затрудняюсь и не могу найти ответ.

Итак, у меня есть класс изображений под названием .accom-img и класс элементов div с описаниями под названием .accom-desc. Когда я наводил курсор на .accom-img, я скрывал это с помощью slideUp() и показывал .accom-desc (которые скрыты при загрузке страницы, но расположены непосредственно под ними) только с .show().

Когда мышь покидает .accom-desc, я хочу, чтобы изображение скользило вниз. Я могу заставить все работать, кроме случаев, когда мышь покидает .accom-desc. Изображение просто остается скрытым.

Пожалуйста, помогите мне с тем, что я делаю неправильно. Спасибо!

       jQuery(document).ready(function() {
    	jQuery('.accom-desc').hide();

    	jQuery('.accom-img').hover(function() {
    		jQuery('.accom-img').slideUp();
    	}, function() {
          	jQuery('.accom-desc').show();
    	});

    	jQuery('.accom-desc').mouseleave(function() {
    		jQuery('.accom-img').slideDown();
    	}, function() {
            jQuery('.accom-desc').hide();
    	});
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="accom-container">
  <div class="accom-desc"> 
    <h4>6 Sleeper House</h6> 
    <ul class="accom-ul"> 
      <li>2 x en-suite bedrooms each with a double bed with mosquito net.</li> 
      <li>2 x single beds with mosquito nets in the living area.</li> 
      <li>Fridge and chest freezer and fully fitted kitchen.</li> 
      <li>Television with DVD-player..bring lots of DVD's and own DSTV- decoder.(DSTV dish and connection available)</li> <li>Own private Jacuzzi</li> 
    </ul> 
  </div> 
</div>


jquery css jquery-hover
person iwanzbiz    schedule 10.03.2016    source источник
comment
Привет, iwanzbiz, добро пожаловать в stackoverflow. Не могли бы вы опубликовать свой HTML-код?   -  person Peter Wilson    schedule 10.03.2016
comment
Привет, спасибо, ответ С. Надежного сработал для меня, я обязательно опубликую HTML в будущем. Еще раз спасибо.   -  person iwanzbiz    schedule 10.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Это может быть потому, что ваши функции работают одновременно. Вам нужно сделать что-то вроде этого:

jQuery('.accom-desc').mouseleave(function() {
        jQuery('.accom-img').slideDown(1000, function() {
        jQuery('.accom-desc').hide();
    }));
person S. Nadezhnyy    schedule 10.03.2016