div背景图像交叉淡入淡出使用计时器

时间:2015-12-16 13:36:46

标签: javascript jquery html css

我有一个背景图片褪色的div。我想要淡化它们但是我只能将它们淡化为白色,然后再回到下一个图像。我尝试使用fadeTo()而不是fadeIn(),但没有太大的区别。这是代码:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>
    <logger name="org.springframework.boot" level="INFO"/>
    <logger name="org.springframework.security" level="ERROR"/>
    <logger name="org.glassfish.jersey" level="DEBUG"/>

    <property resource="application.properties"/>

    <appender name="DUMMY_APPENDER" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>${project.build.directory}/${log.folder}/logfile.log</file>
        <encoder>
            <pattern>%d{"yyyy-MM-dd HH:mm:ss,SSS zzz"}, [%thread] %-5level %logger{5} - %msg%n
            </pattern>
        </encoder>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${log.folder}/spring.log.%d</fileNamePattern>
        </rollingPolicy>
    </appender>

    <logger name="xxxxxx" level="INFO" additivity="false">
        <appender-ref ref="DUMMY_APPENDER"/>
    </logger>

    <root level="INFO">
        <appender-ref ref="DUMMY_APPENDER"/>
    </root>
</configuration>

HTML:

<script type="text/javascript">
      var b_imgs = ["dl1.jpg", "dl2.jpeg"];
      $(function () {
          var i = 0;
          $("#index_jum").css("background-image", "url(/assets/" + b_imgs[i] + ")");
          setInterval(function () {
              i++;
              if (i == b_imgs.length) {
                  i = 0;
              }
              $("#index_jum").fadeOut(2500, function () {
                  $(this).css("background-image", "url(/assets/" + b_imgs[i] + ")");
                  $(this).fadeIn(2500);
              });
          }, 9000);
      });
</script>

CSS:

<section id="index_jum" class="mouse-bg row" data-autoheight="true">

如何交叉淡化图像?或者有没有办法将fadeIn()/ fadeOut()变为黑色而不是白色?目前,图像淡入淡出然后有白色过渡。即。 image1淡入白色,白色渐变为image2

0 个答案:

没有答案