css'不显示'第一次不起作用

css 'display none' does not work in first time

本文关键字：不起作用 第一次 css 显示      更新时间：2024-04-23

现在我正在用jquery.transit开发一个幻灯片放映应用程序。我想做的是在照片显示动画后隐藏它。所以我将显示、转换和转换的属性设置为"none"值。然后，幻灯片放映应用程序运行良好，但我注意到显示：Chrome中的js控制台中没有设置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是img dom的Array对象，每个对象在下面都有一个类。

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

 $(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();

将diaplay更改为display，看看这是否为您修复了这两个错误。

相关文章：