Question

现在，我已经设置了幻灯片并且工作正常但我希望幻灯片中的内容（#contact-slide）在幻灯片激活（向下滑动）时淡入淡出，并在幻灯片停用时淡出（向上滑动）。

这是我的HTML：

<section id="contact">
    <div class="slide-container">
        <section id="contact-slide">
            <section id="contact-form">
                <a href="#" id="slide-up"></a>
                <section id="contact-about">
                    <h2>Who is <span class="green">Company</span>?</h2>
                    <p>We are blah blah blah...</p>
                </section>
                <section id="contact-data">
                    <h2>Get in <span class="green">touch</span>!</h2>
                </section>
            </section>
        </section>
    </div>
</section>

以下是js。你可以看到我试图在第4行插入$('#contact-slide').fadeOut();但它没有用。我做错了什么？

  $('a#slide-up').click(function () {
    $('.slide-container').slideUp(400,'easeOutExpo',function(){
      $('#slide-toggle').removeClass('active');
      $('#contact-slide').fadeOut();
    });
    return false;
  });

  $('a#slide-toggle').click(function(e) {
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
      $('.slide-container').slideUp(400,'easeOutExpo',function() {
        $(slideToggle).removeClass('active');
      });
    }
    else {
      $('.slide-container').slideDown(300,'easeInExpo');
      $(slideToggle).addClass('active');
    }
  });

Answer 1

您可以尝试使用animate方法将不透明度从0设置为1，反之亦然，因为fadeIn / fadeOut不适合此处。试试这个。

$('a#slide-toggle').click(function(e) {
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
      $('.slide-container').slideUp(400,'easeOutExpo',function() {
        $(slideToggle).removeClass('active');
      }).animate({
         opacity: 0
      }, 400);
    }
    else {
      $('.slide-container').slideDown(300,'easeInExpo')
      .animate({
         opacity: 1
      }, 300);

      $(slideToggle).addClass('active');
    }
});

当jQuery幻灯片激活和停用时，如何淡入/淡出内容？

1 个答案: