0

Используя hover() а так же animate() написал скрип чтобы при наведении на ссылку появлялся <span> с текстом. Но столкнулся с проблемой - при отводе мыши <span> никуда не исчезает. В чем проблема?

$('.animate-visible-1').hover(function() {
  $('.view-project-hover-1').stop().animate({
    opacity: 1,
    marginTop: "0px",
    marginBottom: "7px"
  }, 500);
});
span.view-project-hover {
  display: block;
  font-family: 'Futura PT';
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  padding-top: 10px;
  opacity: 0;
  margin-top: 7px;
  margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="animation-element">
  <a class="photo-model animate-visible-1" href="#"><img src="img/stasha-homepage.jpg" alt=""></a>
  <div class="portfolio-preview-text-wrapper">
    <a class="portfolio-preview-category-link" href="#">фото</a>
    <h3><a class="animate-visible-1" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolorum.</a></h3>
    <span class="view-project-hover view-project-hover-1">открыть проект</span>
  </div>
</li>

2 ответа 2

2

$('.animate-visible-1').hover(function() {
    $('.view-project-hover-1').stop().animate({
      opacity: 1,
      marginTop: "0px",
      marginBottom: "7px"
    }, 500);
  },
  function() {
    $('.view-project-hover-1').stop().animate({
      opacity: 0,
      marginTop: "7px",
      marginBottom: "0px"
    }, 500);
  }
);
span.view-project-hover {
  display: block;
  font-family: 'Futura PT';
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  padding-top: 10px;
  opacity: 0;
  margin-top: 7px;
  margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="animation-element">
  <a class="photo-model animate-visible-1" href="#"><img src="img/stasha-homepage.jpg" alt=""></a>
  <div class="portfolio-preview-text-wrapper">
    <a class="portfolio-preview-category-link" href="#">фото</a>
    <h3><a class="animate-visible-1" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolorum.</a></h3>
    <span class="view-project-hover view-project-hover-1">открыть проект</span>
  </div>
</li>

0

Зачем здесь jquery? Можно ведь на чистом css сделать:

span.view-project-hover {
  display: block;
  font-family: 'Futura PT';
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  padding-top: 10px;
  opacity: 0;
  margin-top: 7px;
  margin-bottom: 0;
  transition: .7s;
}

h3:hover + span {
  opacity: 1;
}
<li class="animation-element">
  <a class="photo-model animate-visible-1" href="#"><img src="img/stasha-homepage.jpg" alt=""></a>
  <div class="portfolio-preview-text-wrapper">
    <a class="portfolio-preview-category-link" href="#">фото</a>
    <h3><a class="animate-visible-1" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, dolorum.</a></h3>
    <span class="view-project-hover view-project-hover-1">открыть проект</span>
  </div>
</li>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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