Question

想法是当用户将鼠标悬停在图像上时显示文本。这是有效的，但幻灯片效果不起作用。它突然出现并突然离开。我安装了jQuery和jQuery-UI，并且控制台中没有出现任何错误。知道为什么吗？

HTML

 <div class="project-container">
              <a href"www.hiburnholidays.com"><img src="imgs/portfolio_hiburn.jpg"></a> 
              <div class="project-container__text">
               <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
                </p>
              </div>
  </div>

CSS

.project-container {
width: 38.4688rem;
height: 28.9rem;
position: relative;
overflow: hidden;

}

.project-container__text {
    padding: 2rem;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    background: #63b9ce; 
    color: #fff;
}

JQUERY

    $(document).ready(function(){

    $('.project-container').on('mouseover', function(){
        $(this).find('.project-container__text').addClass('project-display'), function(){ //and one thing to be added you have to get the element in the given context of the selector with 'this keyword:
            $('.project-container__text').effect('slide', 'left');
        };
    });

    $('.project-container').mouseleave(function(){
        $('.project-container__text').removeClass('project-display'), function() {
            $('.project-container__text').effect('slide', 'right');
        };

    });

});

Answer 1

事情是addClass和removeClass实际上不接受回调函数。尝试这样的事情：

$(document).on({
  mouseenter: function() {
    $(this).find('.project-container__text').addClass('project-display')
    $('.project-container__text').effect('slide', 'left');
  },
  mouseleave: function() {
    $('.project-container__text').removeClass('project-display')
    $('.project-container__text').effect('slide', 'right');
  }
}, '.project-container');

jQuery幻灯片效果问题

1 个答案: