jquery和css3滑塊單向滑動但不是其他

我現在有了我的代碼，可以讓我的物品滑到視圖左側並被刪除。我的問題是，一旦我刪除了該元素，我在屏幕右側創建另一個元素，一旦原始元素被刪除，我想要將其放入幻燈片中。jquery和css3滑塊單向滑動但不是其他

現在正在做的事情是，一旦元素被刪除，正確的元素出現在中心與動畫。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Slider View</title> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <style> 
      .leftRemove{ 
       left: -3000px; 
      } 
      .rightAdd{ 
       position: relative; 
       right: -3000px; 
       transition: right 2s; 
       -webkit-transition: right 2s; 
      } 
      .centerFocus{ 
       position: relative; 
       width: 100px; 
       height: 100px; 
       margin: 0 auto; 
       right: 0px; 
       background-color: green; 
       transition: left 2s; 
       -webkit-transition: left 2s; 
      }     

     </style> 
     <script> 
     $(document).on('click', '#main', function(){ 
      $('body').append("<div class='rightAdd'>Hello!</div>"); 
      $("#main").addClass('leftRemove'); 
      setTimeout(function(){ 
       $('.leftRemove').remove(); 
       $('.rightAdd').attr('id', 'main'); 
       }, 800); 
      setTimeout(function(){ 
       $("#main").removeClass('rightAdd'); 
       $("#main").addClass('centerFocus'); 
       }, 1000); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id='main' class='centerFocus'></div> 
    </body> 
</html>

有什麼建議嗎？

來源

2013-11-22 Austin Lovell

我不認爲right是一個有效的css財產。向右移動left爲正值。我還移動了您的附加hello，以便過渡更順利。

試試這個：

 .rightAdd{ 
      position: relative; 
      left: 1000px; 
      transition: right 2s; 
      -webkit-transition: right 2s; 
     } 


     $(document).on('click', '#main', function(){ 
     $("#main").addClass('leftRemove'); 
     setTimeout(function(){ 
      $('.leftRemove').remove(); 
      $('body').append("<div class='rightAdd'>Hello!</div>"); 
      $('.rightAdd').attr('id', 'main'); 
      }, 800); 
     setTimeout(function(){ 
      $("#main").removeClass('rightAdd'); 
      $("#main").addClass('centerFocus'); 
      }, 1000); 
    });

例

http://jsfiddle.net/9CGUU/

更新

我看到了Hello!閃爍我的屏幕上時，我曾在全屏小提琴。這個更新解決了我的問題。

setTimeout(function(){ 
      $('.leftRemove').remove(); 
      $('body').append("<div class='rightAdd'></div>"); 
      $('.rightAdd').attr('id', 'main'); 
}, 800); 
setTimeout(function(){ 
      $("#main").removeClass('rightAdd'); 
      $('#main').html('Hello!'); 
      $("#main").addClass('centerFocus'); 
}, 1000);

http://jsfiddle.net/9CGUU/6/

來源

2013-11-22 20:28:51 Trevor

這就是我一直在尋找。我很感謝你優化代碼。 –

@ user1753797您好！我只是在看，而且'Hello！'全屏閃爍一點點。這個例子比較好。 http://jsfiddle.net/9CGUU/6/ – Trevor

jquery和css3滑塊單向滑動但不是其他

回答

相關問題