Question

以下脚本设置为淡出，然后淡入下一个横幅集。我想知道如何将其修改为交叉淡入淡出，以便下一个横幅集在现有横幅上淡入，然后消失。它看起来会更清洁。

我看过一堆用于交叉淡入淡出的脚本;但是，因为这个脚本会淡化“children”元素，所以不确定如何修改它们以使其工作。

如果有更好的方法，请告诉我，

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 9000; 
    var transition_speed    = 1000;

    var simple_slideshow    = $("#graphic_1"),
        listItems           = simple_slideshow.children('.banner'),
        listLen             = listItems.length,
        i                   = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);



            });

        };

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);


});

html / php（这样你们都可以看到数据的外观）

$rotban1 = $db1->query("SELECT background_image, background_image_alt, foreground_image, foreground_image_alt, text FROM banner") or die ('Unable to execute query. '. mysqli_error($db1con));
$slidecount == 0;
    if ($rotban1->num_rows > 0) {
while ($slide = $rotban1->fetch_assoc()) {

echo '<div class="banner">';
echo '<img class="background_image" alt="'. $slide['background_image_alt'] .'" src="'. $slide['background_image'] .'">';
    echo '<img class="foreground_image" alt="'. $slide['foreground_image_alt'] .'" src="'. $slide['foreground_image'] .'">';
    if (!empty( $slide['text'])) { echo '<h1>'. $text .'</h1>'; }
echo '</div>';
}
    }

Answer 1

在第一个效果完成时，不要调用一个效果，而是使用 .animate() 方法，并将queue选项设置为false 并同时运行它们。

changeList = function () {

  listItems.eq(i).animate(
    { opacity:0 }, 
    {
      queue: false,
      duration: 3000
  });

  i += 1;
  if (i === listLen) {
    i = 0;
  }

  listItems.eq(i).animate(
    { opacity:1 }, 
    {
      queue: false,
      duration: 3000
  });

};

这是一个有效的例子：

＆＃13;

$("#red").animate({
      opacity:0
    }, {
      queue: false,
      duration: 3000
});

$("#blue").animate({
      opacity:1
    }, {
      queue: false,
      duration: 3000
});

＆＃13;

div { width:50px; height:50px; position:absolute; top:0; }
#red { background:red; }
#blue { background:blue; opacity:0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red">

</div>
<div id="blue">

</div>

＆＃13;

Answer 2

您在fadeIn完成后致电fadeOut。

尝试同时调用它们，为此不要使用回调函数：

changeList = function () {
    listItems.eq(i).fadeOut(transition_speed);
    i += 1;
    if (i === listLen) {
        i = 0;
    }
    listItems.eq(i).fadeIn(transition_speed);
};

这样，fadeOut和fadeIn动画会同时开始（忽略毫秒）

Answer 3

您可以使用@Injectable() export class SiteService { private url : string = "site"; constructor( private http: Http, private authService : AuthenticationService, private router : Router, private globals : Globals ){} addSite(site : Site) : Observable<Site> { let data = new URLSearchParams(); data.append('auth', this.authService.getToken()); const options = new RequestOptions({ params: data }); return this.http.post(this.url, site, options).map(response => { return toSite(response.json().data); }).catch(this.handleError); } changeSite(site : Site) : Observable<Site> { let data = new URLSearchParams(); data.append('id', this.authService.getToken()); const options = new RequestOptions({ params: data }); return this.http.post(`${this.url}/${site.siteName}`, site, options).map(response => { return toSite(response.json().data); }).catch(this.handleError); } private handleError(error : any) { let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error'; console.error(errMsg); if((error.status == 403 || error.status == 401) &&(error.json().error.indexOf("token") >= 0)){ this.globals.nextLocation = this.router.url; this.router.navigate(['login']); } return Observable.throw(error); } css和transition，opacity，position:absolute和setTimeout()至＆＃34;交叉渐变＆＃34;元素.eq()呈现

＆＃13;

opacity

＆＃13;

function crossFade(n) {
  setTimeout(function() {
    $("div img").eq(n).css("opacity", 0);
    $("div img").eq(n).prev("img").css("opacity", 1);
    setTimeout(function() {
      if (--n > 0) {
        crossFade(n)
      } else {
        setTimeout(function() {
          $("div img").css("opacity", 0).eq(len)
            .css("opacity", 1);
          setTimeout(function() {
            crossFade(len)
          }, 1500)
        }, 1500)
      }
    }, 1500)
  }, 1500)
}

const len = $("div img").length - 1;

crossFade(len);

＆＃13;

body {
  width: 100vw;
  overflow: hidden;
}

div {
  position: relative;
  width: 200px;
  height: 200px;
  left: calc(50vw - 100px);
}

div img {
  transition: opacity 3s ease-in-out;
  position: absolute;
}

div img:not(:nth-child(3)) {
  opacity: 0;
}

＆＃13;

修改以使脚本交叉渐变而不是淡出＆amp;然后淡入

3 个答案: