0

Приветствую помогите доработать jquery. при Hover на блок, Первый блок должен исчезать с стилем SlideUp, а за ним должен наполнить второй блок с таким же стилем SlideUp. а при удалении стрелка мыши обратный стиль с SLideDown В мои случаях, они исчезали быстро, те курсор стоить в стиле hover а в то обратный скрипт применяется. Они должны стоять, пока курсор стоит. Код на JSFiddle.

HTML:

<div id="objects">
<div class="advantage">
   <p class="h2">Этот блок должен исчезать с стилем slideUp</p>
 </div>
<div class="advantage-hover">
   <p class="h2">Этот блок должен появляться после исчезнование первого блока с стилем slideUp</p>
   </div>
</div>
<!-- То есть второй блок advantage-hover заменять плавно первого блока -->

CSS:

.advantage {
 width:130px;
 height:130px;
 background:red;
}
.advantage-hover {
  display:none;
  width:130px;
  height:130px;
  background:blue;
}

JS:

$().hover(
  function() {
    $(.advantage).slideUp();
    $(.advantage-hover).slideUp();
  },
  function() {
    $(.advantage).slideDown();
    $(.advantage-hover).slideDown();
  }
);

1 ответ 1

0

Вот решение вашей задачи: http://jsfiddle.net/shugich/nbLhfp67/1/

$('.advantage').on('mouseenter', function() {
  $(this).slideUp()
  $('.advantage-hover').slideDown();
});
$('.advantage-hover').on('mouseleave', function() {
  $(this).slideUp()
  $('.advantage').slideDown();
});
* {
  margin: 0;
  padding: 0;
}
.advantage {
  width: 130px;
  height: 130px;
  background: red;
}
.advantage-hover {
  background: blue;
  width: 130px;
  height: 130px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="objects">
  <div class="advantage">
    <p class="h2">Этот блок должен исчезать с стилем slideUp</p>
  </div>
  <div class="advantage-hover">
    <p class="h2">Этот блок должен появляться после исчезнование первого блока с стилем slideUp</p>
  </div>
</div>
<!-- То есть второй блок advantage-hover заменять плавно первого блока -->

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.