Question

我试图弄清楚如何在条件按钮点击触发的css类之间淡入淡出。而不是简单的上课和课堂。

我已经将以下jsfiddle从answer改为this;除了褪色外，大部分都在工作。

     // Check if localStorage is supported
    if ('localStorage' in window && typeof localStorage == 'object') {
      $(document).ready(function() {

        // Set the class if greyscale is set
        // Note that localStorage saves everything as strings
        if (localStorage["darkmode"] == "1") {
          $('html').addClass('dark');
          $('.daytime').addClass('nighttime').removeClass('daytime');
          $("#lightson").val("Turn Lights back on");
        }
        // Register click listener for the button
        $('#lightson').click(function() {
          // Toggle greyscale on and off
          if (localStorage["darkmode"] != "1") {
            $('html').addClass('dark').removeClass('light').fadeIn("fast");
            localStorage["darkmode"] = "1";
            $('.daytime').addClass('nighttime').removeClass('daytime');
            $("#lightson").val("Turn Lights back on");
          } else {
            $('html').removeClass('dark').addClass('light').fadeIn("fast");
            localStorage["darkmode"] = "0";
            $('.nighttime').addClass('daytime').removeClass('nighttime');
            $("#lightson").val("Dark Mode");
          }
        }); // - button click
      }); // - doc ready
    }

html.light {
  background: white;
  color: grey;
}
html.dark {
  background: grey;
  color: white;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas libero lectus, ac elementum est euismod sit amet. Sed maximus ac ipsum non pulvinar. Nulla tempor turpis a metus sollicitudin, in interdum dui mollis. Curabitur dictum magna magna,
  sit amet tempus justo consequat sit amet. Vestibulum varius nisl justo, vel egestas justo scelerisque sit amet. Duis vulputate lacinia lacus id lacinia. Sed vel tellus id nulla finibus pellentesque vel eu sapien. Praesent risus eros, pellentesque in
  tempor a, vestibulum sit amet purus. Mauris sapien velit, varius nec ex eget, vestibulum laoreet diam. Nam eros nisi, euismod ultrices viverra eu, dictum quis nisl. Suspendisse quis eleifend quam. Curabitur consectetur diam non ante rutrum, tincidunt
  placerat felis tincidunt. Fusce vitae dolor dui. Morbi mattis eu dui sit amet laoreet.</div>
<input type="button" id="lightson" class="daytime" value="Dark Mode">

你可以看到黑暗与光明之间的过渡是苛刻的，我想在它们之间褪色。我尝试将.fadeIn("fast");添加到两个＆＃39; add和removeClass＆＃39;上面的jsfiddle语句中的行如下：$('html').addClass('dark').removeClass('light').fadeIn("fast");

然而，这似乎根本没有做任何事情，可能是有充分理由的

我无法解决样式表中普通css的问题，因为每次页面加载时都不希望淡入效果，就像按下按钮一样。

Answer 1

＆＃39; fadeIn＆＃39; jQuery中的方法设置隐藏元素的不透明度，而不是在类之间设置动画。

你考虑过使用css过渡吗？

html {
    background:white;
    color:grey;
    transition: all 0.4s
}
html.dark {
    background: grey;
    color: white;
}

然后，您需要的唯一JavaScript就是切换“黑暗”。 html元素上的类。

您在加载页面时获得淡入的原因是，在原始代码中，您正在应用“黑暗”字样。页面加载后的类，触发动画。如果您确保HTML标记没有“转换”功能，请执行此操作。在您设置初始样式之后，您可以避免这种不受欢迎的动画。

Here's an example使用您的原始代码。注意额外的一行：

document.createElement('div').offsetHeight;

这是必要的，因为有些浏览器在尝试通过排队更改来优化重绘布局的次数时，不会立即应用样式更改，直到必要时为止。此黑客强制浏览器立即应用您的样式，以确保它能够为您提供正确的值。

Answer 2

您可以使用jquery-ui和.switchClass()函数

$('html').switchClass('light','dark', 1000, 'linear');

并改回来

$('html').switchClass('dark','light', 1000, 'linear');

.switchClass() Documentation

或者你可以使用.toggleClass()并为身体提供默认的灯光属性，这很容易切换。

.toggleClass() Documentation

你也可以使用jquery .animate()函数，你需要在函数中指定css而不是类名。

.animate() Documentation

Answer 3

由于这是值得信赖的，我会详细说明。

你不能淡入或淡出课程。要么你拥有它，要么你没有。您可以做的是转换与该类关联的样式。但是，fadeIn / fadeOut函数不是这样做的方法：

fadeIn（）方法逐渐更改选中的不透明度元素，从隐藏到可见（褪色效果）。

http://www.w3schools.com/jquery/eff_fadein.asp

也许this更符合您的需求。相关位是过渡属性。例如：

JSFiddle

变更摘要：

删除了淡入和淡出。
将灯光模式从html.light移动到html（清洁标记，更重要的是：没有未定义的既不亮也不暗）
补充：“过渡：全部0.8秒;”至两种风格

JS

// Check if localStorage is supported
if ('localStorage' in window && typeof localStorage == 'object') {
    $(document).ready(function () {

        // Set the class if greyscale is set
        // Note that localStorage saves everything as strings
        if (localStorage["darkmode"] == "1") {
            $('html').addClass('dark');
            $('.daytime').addClass('nighttime').removeClass('daytime');
            $("#lightson").val("Turn Lights back on");
        }
        // Register click listener for the button
        $('#lightson').click(function () {
            // Toggle greyscale on and off
            if (localStorage["darkmode"] != "1") {
                $('html').addClass('dark');
                localStorage["darkmode"] = "1";
                $('.daytime').addClass('nighttime').removeClass('daytime');
                $("#lightson").val("Turn Lights back on");
            } else {
                $('html').removeClass('dark');
                localStorage["darkmode"] = "0";
                $('.nighttime').addClass('daytime').removeClass('nighttime');
                $("#lightson").val("Dark Mode");
            }
        }); // - button click
    }); // - doc ready
}

CSS

html {
    background:white;
    color:grey;
    transition: all 0.8s;
}
html.dark {
    background: grey;
    color: white;
    transition: all 0.8s;
}

Answer 4

我建议使用CSS3 transition代替JS动画：

html{
    transition: all 0.5s;
}

演示：http://jsfiddle.net/v5vw9r3a/4/

然而，要回答你提出的问题，fadeOut元素，并使类更改并fadeIn回调它，即：

$html = $('html'); // Don't search for the element so many times -- that is slow
$html.fadeOut("fast",function(){ // fadeOut fast, then:
    $html.addClass('dark').removeClass('light').fadeIn("fast"); // addClass, removeClass, and fadeIn
});

演示：http://jsfiddle.net/v5vw9r3a/5/

Answer 5

你需要jQuery ui来在类之间进行转换。

此处示例http://jsfiddle.net/v5vw9r3a/6/

$('html').addClass('dark', 1000, "easeOutSine");

如何在条件查询中的类之间淡入淡出

5 个答案: