切换div以在点击时淡入淡出

Question

问题

当用户点击第display:none面的第一个span.highlight展示信息框时，我有两个aside.info信息框。如果单击其他跨度，则显示备用第二个信息框。 然而，第二次点击链接，不会淡出/退回

以前，我没有fadeOut功能，而是bg-one和bg-two淡入淡出，但在其他元素消失之前，您仍会看到前一个元素， 所以我觉得问题出在我的if / else语句上。

JSFiddle：http://jsfiddle.net/51haqmg3/4/（滚动，直到看到两个突出显示的短语）

scripts.js中

    /*-------------------------------------
    HIGHLIGHT
    --------------------------------------*/

    $(".highlight").click(function() {
       $(".highlight").removeClass("active"); // Remove active class from spans
       $(".fa-plus-circle").show(); // Show the Font Awesome icon
       $(this).addClass("active");  // Add an active class to span just
       $(this).find(".fa-plus-circle").hide();
       $(this).data("clicked", true);

       var clicked = $(".highlight").data("clicked");

       if (clicked) {
        $(".bg-one").fadeOut(500, function() {
            $(".bg-two").fadeIn(500);
        });
       } else {
        $(".bg-two").fadeOut(500, function() {
            $(".bg-one").fadeIn(500);
        });
       }
   });

的index.html

<aside class="info bg-one">
        <div class="define">
            <p class="background">Background One</p>
            <img src="https://placeholdit.imgix.net/~text?txtsize=21&txt=224%C3%97148&w=224&h=148" alt="">
            <p class="caption"></p>
            <p class="hoarding"></p>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, laudantium, excepturi. Neque doloribus praesentium ad. Voluptates animi accusamus iusto laborum aperiam quis, eveniet architecto mollitia labore in laboriosam illum. Facilis.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum perspiciatis minus corporis expedita fugiat excepturi nostrum atque adipisci magnam deserunt, reprehenderit, a fugit, neque esse unde mollitia at nemo. Natus?</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quas nulla, voluptatem corrupti vel, maiores delectus fuga dolorum sint, nisi suscipit deleniti, velit? Debitis maxime, necessitatibus similique saepe vel nisi!</li>
            </ul>
        </div><!-- /.define -->
    </aside>

Answer 1

如果您只想检测第一个元素是否被点击，或者是否是第二个元素然后逐渐淡出并淡入相应的信息框，您可以这样做： http://jsfiddle.net/so14L57w/

我改变的是bool变量来确定要切换到的背景：

var fadeOne = $(".highlight").index(this) == 0;

这不是一个很好的解决方案，因为它不会超出你的2个元素。但是，您可以打开$（“。highlight”）索引并以超过2个元素的方式加载正确的背景。

Answer 2

您总是将它们设置为true，而不是在每次点击时切换它们。

修正此行：

$(this).data("clicked", true);

类似于：

$(this).data("clicked", !$(this).data("clicked"));

也是它上面的整个区块：

$(".highlight").removeClass("active"); // Remove active class from spans
$(".fa-plus-circle").show(); // Show the Font Awesome icon
$(this).addClass("active");  // Add an active class to span just
$(this).find(".fa-plus-circle").hide();

应该在条件中，以便您在点击时可以取消其操作。