淡出 div，淡入另一个 jquery

Question

我希望淡出（或删除？） div 中的文本，然后在单击按钮时淡入或显示不同 div 中的文本。我在编写 jQuery 时遇到了一些麻烦，非常感谢任何建议或帮助。

我应该主动删除 div 的内容吗？还是使用replaceWith()？我应该在css中将显示设置为none吗？

非常感谢任何有关我的代码的帮助和一般性建议。

这是它的外观：

<div class="container">
        <div class="row">
            <div class="col-12">
                <header>
                    <h1 class=""><a href="index.html">##</a></h1>
                    <h3 class="">Educational Consultant and Tutor</h3>
                    <ul class="topul">
                        <li>
                            <button id="home">
                                <p>Home</p>
                            </button>
                        </li>
                        <li>
                            <button id="aboutme">
                                <p>About Me</p>
                            </button>
                        </li>
                        <li>
                            <button id="tuition">
                                <p>Tuition</p>
                            </button>
                        </li>
                        <li>
                            <button id="consultancy">
                                <p>Consultancy</p>
                            </button>
                        </li>
                        <li>
                            <button id="testimonials">
                                <p>Testimonials</p>
                            </button>
                        </li>
                        <li>
                            <button id="contact">
                                <p>Contact</p>
                            </button>
                        </li>
                    </ul>
                </header>
            </div>
        </div>
    </div>
    <div class="container" id="secondcontainer">
        <div class="row" id="mainstuff">
            <div class="col-12 col-lg-4 text-center " id="bigimage">
                <img src="images/Raph%20edited.jpg" alt="">
            </div>
            <div class="col-12 col-lg-8 p-4 " id="textarea">
                <div id="texts" class="vertical ">
                        <p>I am an experienced 11+ tutor currently living and working in London. Former pupils have been accepted to Dulwich College, Latymer Upper, Godolphin and Latymer, St Paul’s Girls’ School, Wetherby Senior School, The Harrodian and Queen’s Gate.</p>
                        <p>After graduating from Cambridge in 2011, I moved to Moscow, Russia, where I worked as a private tutor for three years, preparing pupils for entrance to London schools. As well as helping my pupils with their academic studies, I also supervised their music practice (piano, singing and drums), introduced them to basic computer programming blah blah I returned to the UK only to promptly leave again, and in 2016 I travelled through South America and Australia, teaching pupils English and maths in Rio de Janeiro, Buenos Aires, Rosario, Mendoza and Brisbane. </p>
                </div>
                <div class="vertical " id="aboutmetext">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                </div>
                <div class="vertical " id="tuitiontext">
                    <p>TUITION TEXTOadipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                    <p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
                </div>
            </div>
        </div>
    </div>

还有我当前的 jQuery：

$(document).ready(function() {

    var current = "#texts";
    console.log(current);

    $("#aboutme").click(function(){
        $(current).remove();
        $("#aboutmetext").show();
        current = "#aboutmetext";
        console.log(current);
    });

console.log(current);

    $("#tuition").click(function(){
        $(current).remove();
        $("#tuitiontext").show();
        current = "#tuitiontext";
        console.log(current);
    });


});

Answer 1

不是 100% 确定你想要什么，但试试这个。它将与按钮对应的文本淡入并淡出其他文本。

$("#aboutme,#tuition").click(function() {
  var id = $(this).attr("id") + "text"
  $(current).fadeOut();
  $("#" + id).fadeIn();
  current = "#" + id;
});

演示

$(document).ready(function() {

  var current = "#texts";

  $("#aboutme,#tuition").click(function() {
    var id = $(this).attr("id") + "text"
    $(current).fadeOut();
    $("#" + id).fadeIn();
    current = "#" + id;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <header>
        <h1 class=""><a href="index.html">##</a></h1>
        <h3 class="">Educational Consultant and Tutor</h3>
        <ul class="topul">
          <li>
            <button id="home">
                                <p>Home</p>
                            </button>
          </li>
          <li>
            <button id="aboutme">
                                <p>About Me</p>
                            </button>
          </li>
          <li>
            <button id="tuition">
                                <p>Tuition</p>
                            </button>
          </li>
          <li>
            <button id="consultancy">
                                <p>Consultancy</p>
                            </button>
          </li>
          <li>
            <button id="testimonials">
                                <p>Testimonials</p>
                            </button>
          </li>
          <li>
            <button id="contact">
                                <p>Contact</p>
                            </button>
          </li>
        </ul>
      </header>
    </div>
  </div>
</div>
<div class="container" id="secondcontainer">
  <div class="row" id="mainstuff">
    <div class="col-12 col-lg-4 text-center " id="bigimage">
      <img src="images/Raph%20edited.jpg" alt="">
    </div>
    <div class="col-12 col-lg-8 p-4 " id="textarea">
      <div id="texts" class="vertical ">
        <p>I am an experienced 11+ tutor currently living and working in London. Former pupils have been accepted to Dulwich College, Latymer Upper, Godolphin and Latymer, St Paul’s Girls’ School, Wetherby Senior School, The Harrodian and Queen’s Gate.</p>
        <p>After graduating from Cambridge in 2011, I moved to Moscow, Russia, where I worked as a private tutor for three years, preparing pupils for entrance to London schools. As well as helping my pupils with their academic studies, I also supervised
          their music practice (piano, singing and drums), introduced them to basic computer programming blah blah I returned to the UK only to promptly leave again, and in 2016 I travelled through South America and Australia, teaching pupils English
          and maths in Rio de Janeiro, Buenos Aires, Rosario, Mendoza and Brisbane. </p>
      </div>
      <div class="vertical " id="aboutmetext">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
      </div>
      <div class="vertical " id="tuitiontext">
        <p>TUITION TEXTOadipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
        <p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

我会通过动画 CSS opacity 属性来淡出。动画结束后，我会显示不同元素的文本。

//fade out
$(selector).animate({opacity: 0}, 2000, function(){
  //show different element's text
  $(differentElement).show();
  });

$('#first').on('click', function(e){
  e.preventDefault();
  $(this).children('p').animate({opacity: 0}, 2000, function(){
    $('#text p').show();
    });
  });

#text p{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first">
<p>Hello World</p>
</button>
<div id="text">
<p>Lots of text content here</p>
</div>