在旋轉效果的範圍內更改文字

Question

我試圖在助推器轉盤滑動到新項目時更改具有特定效果的範圍內的文字。相關文本是在輪播中顯示的新圖像的ID。

下面的代碼工作好嗎：

$('.carousel').bind('slide.bs.carousel', function (e) { 
     $('#landing-displayed-item').fadeOut(); 
    setTimeout(function(){ 
     $('#landing-displayed-item').text($('.carousel').find('.active').find('img').attr('id')); 
     $('#landing-displayed-item').fadeIn(); 
    }, 750); 
}); 

但我想動畫不是一個淡出/淡入，而是類似於the one seen here旋轉效果。

因此我嘗試下面的代碼，但它不工作（沒有動畫的所有文本變更）：

$('.carousel').bind('slide.bs.carousel', function (e) { 
    setTimeout(function(){ 
     $('#landing-displayed-item').text($('.carousel').find('.active').find('img').attr('id')).show().css({ 
      "-webkit-transform": " rotate(0) scale(1)", 
      "-moz-transform": "rotate(0) scale(1)", 
      "-o-transform": "rotate(0) scale(1)", 
      "transform": "rotate(0) scale(1)" 
     }); 
    }, 750); 
}); 

任何想法？

Answer 1

檢查這個演示：

var count=0; 
 

 
$('a').click(function() { 
 
    $('div').addClass('rotate') 
 
      .delay(500) 
 
      .queue(function(n) { 
 
      $(this).html("Another Text"+count).removeClass('rotate'); 
 
      n(); 
 
      }) 
 
    count++; 
 
});

div { 
 
    font-size: 3em; 
 
    font-family: sans-serif; 
 
    margin-top: 20px; 
 
    transition:all .5s linear; 
 
    transform-origin: center; 
 
} 
 
div.rotate { 
 
    transform:rotateX(-90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"> Change Text</a> 
 
<div>This is text for Slide</div>