Question

我为简单的jquery滑块编写了一个代码，它正在工作，但代码很难看。 anybode可以改进吗？

 $j(function() {
  $j('.single-slide:gt(0)').css({opacity: 0.0 });
  $j('.single-slide:first').addClass( "current-slide" );
  $j('.single-slide:last').addClass( "last-slide" );
  setInterval(function() {

    if ( $j( '.current-slide' ).hasClass( 'last-slide' ) ) {
      $j( '.last-slide' ).removeClass( 'current-slide' ).fadeTo( 'slow', 0 );
      $j('.single-slide:first').addClass( "current-slide" ).fadeTo( 'slow', 1 );
      return;
    } 
      $j( '.current-slide' ).fadeTo( 'slow', 0 ).removeClass( 'current-slide' ).next().fadeTo( 'slow', 1 ).addClass( 'current-slide' );

  }, 3000)
});

Answer 1

我不完全确定您的HTML是什么样的，但是，是的，改进不是根本不使用jQuery（或JavaScript）。

CSS现在有了很好的方法来使用动画和过渡......你可以使用动画和关键帧功能做这样的事情：

.slide-in {
    opacity: 1;
    animation-name: slideIn;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes slideIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

使用转换这样的事情：

.last-slide {
    opacity: 0;    
}

.slide-in {
    -webkit-transition: opacity 2.0s ease-in;
    -moz-transition: opacity 2.0s ease-in;
    -o-transition: opacity 2.0s ease-in;
    opacity: 1;
}

您需要的唯一JavaScript是添加/删除类名以开始动画/转换。

这些CSS功能现在适用于所有现代浏览器。

Jquery不透明度滑块。工作，但原油

1 个答案: