css'display none'在第一次不起作用

Now I'm developing a slide show application with jquery.transit. What I want to do is to hide a photo after its showing animation. So I set properties of display, transform and translate to 'none' value. Then, the slide show application works well, but I noticed display: none is not set in js console in Chrome. After some trials, I found a way to enable display: none for setting twice in my code. Does anyone know what is the problems in my code? Maybe my js code has some problems.

现在我正在用jquery.transit开发一个幻灯片放映应用程序。我想要做的是在显示动画后隐藏照片。所以我设置了显示属性,转换并转换为'无'值。然后,幻灯片放映应用程序运行良好,但我注意到显示:在Chrome中的js控制台中没有设置。经过一些试验,我发现了一种启用display:none的方法,可以在我的代码中设置两次。有谁知道我的代码中有什么问题?也许我的js代码有一些问题。

  function showPhoto() {
    photo_list[counter]
      .css({
        scale   : 2,
        display : 'inline'
      })
      .transition({
        opacity : 1
      }, 1000)
      .transition({
        x : '+=20',
        y : '+=30',
        scale: 2.3
      }, 1500)
      .transition({
        opacity: 0
      }, 500, 'linear', function() {
        $(this)
          .css({
            diaplay   : 'none',
            transform : 'none',
            translate : 'none',
            x         : 0,
            y         : 0,
            scale     : 1
          });
        $(this).css({display: 'none'}); // it works, but its redundant 
        incrDomIndex();
        showPhoto();
      });
  };

photo_list is an Array object of a img dom, and each has a class in below.

photo_list是一个img dom的Array对象,每个都有一个类在下面。

.photo {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 800px;
  height   : 500px;
}

1 个解决方案

#1

 $(this)
      .css({
        diaplay   : 'none', // Mistake here
        transform : 'none',
        translate : 'none',
        x         : 0,
        y         : 0,
        scale     : 1
      });
    $(this).css({display: 'none'}); // it works, but its redundant 
    incrDomIndex();
    showPhoto();

Change diaplay to display and see if that fixes both errors for you.

更改diaplay以显示并查看是否为您修复了这两个错误。