JQuery Fade On Hover Effect - помогите? - PullRequest
Новая
       18

JQuery Fade On Hover Effect - помогите?

2 голосов
/ 13 августа 2011

Я пытаюсь добиться эффекта затухания при наведении курсора с помощью JQuery. В настоящее время у меня есть элемент с атакованным классом "hov", без javascript CSS просто изменит свой цвет на: hover. С JQuery.

Идея состоит в том, чтобы клонировать элемент, когда он перевернут, и поместить его прямо в область перед ним, удалив его из класса "hov", чтобы он был статичным. Затем я затушевываю его, чтобы создать эффект перехода.

Хотя у меня возникли проблемы, после того, как я убрал класс "hov" из клона, он БУДЕТ действовать, как будто он все еще там. Я могу навести курсор мыши на клона, даже если он не может быть нацелен на человека. Есть идеи / советы? 

<a href="#" class="hov rounded-50 action-button">Fade Me Out< /a>

$(".hov").mouseover(function() {

    // Clone the current element, remove the "hov" class so it won't trigger same behavior
    // finally layer it infront of current element

    var $overlay = $(this).clone(true).removeClass("hov").insertAfter($(this));

    // Push it to the side just for testing purposes - fade it out

    $overlay.css({left:'300px'}).fadeOut({duration:500, ease:'easeOutQuad'});
});

1 Ответ

1 голос
/ 13 августа 2011

Нет необходимости клонировать элемент, просто затените оригинальный элемент: 

$('.hov').mouseenter(function() {
  $(this).fadeOut();
});

// Optionally:
$('.hov').mouseleave(function() {
  $(this).stop(true, true).show();
});

Вы также можете использовать функцию наведения: 

$('.hov').hover(function(){
  $(this).fadeOut();
},
function(){
  $(this).stop(true, true).show();
});

Если вы просто хотите, чтобы он частично исчезалВы можете анимировать свойство непрозрачности: 

$('.hov').mouseenter(function() {
  $(this).animate({'opacity': 0.5});
});

Если вы просто хотите, чтобы оно пульсировало, вернитесь к нормальной непрозрачности: 

$('.hov').mouseenter(function() {
  $this = $(this);

  $this.animate({'opacity': 0.5}, {
    'complete': function(){
      $this.animate({'opacity': 1});
    }
  });
});

Наконец, если вы готовы отказаться от поддержки пожилыхбраузеры, вы можете сделать все это с помощью CSS: 

.hov {
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;   
}
.hov:hover {
  opacity: 0.5;
}
...