如何減慢函數中的onclick事件或使它們逐漸發生？尋找平穩過渡

我確信有一個簡單的解決方案，我只是無法將它拼湊在一起......如果點擊「light_off」的id鏈接，那麼我想要所有的小發生變化，該部分正在工作，但他們發生得太突然。我如何減慢或淡入變化，以便過渡看起來更平滑？我淡入？增加「慢」持續時間？動畫？如果是這樣，我將如何正確實施？哎，我希望這是有道理的。任何幫助，將不勝感激！謝謝！！如何減慢函數中的onclick事件或使它們逐漸發生？尋找平穩過渡

<script> 
     $(document).ready(function(){ 
      $("#lights_off").click(function(){ 
       $("#lights_off").fadeOut(1000); 
       $("#main").addClass(" lights_on"); 
       $('#flavoredesign_logo').attr('src','img/logofinal.png'); 
       $("#nav").css("color","#000000"); 
       $("#nav").css("border-bottom"," #333 solid 1px"); 

      }); 
     }); 
    </script>

來源

2017-06-29 Doreen Jones

將CSS過渡解決問題了嗎？例如'#nav {transition：color 2s}'會在兩秒鐘內對你的導航類執行顏色變化。 –

可以使用的setTimeout（函數（）{/ 你的代碼 /}，200），或使用CSS動畫/過渡

來源

2017-06-29 08:51:41 Svidlak

正如在評論中指出，不能使用CSS轉換屬性來實現平滑的類更改？您可以使用它來給出不同屬性值之間轉換的時間框架。例如，如果你想給一個動畫的時間框架顏色之間轉換：

.light { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    transition: background-color 1s; //Most properties can be manipulated through the transition attribute, e.g. width 1s

那麼不同類之間切換與背景顏色不同的值：

.lights_off { 
    background-color: grey; 
} 

.lights_on { 
    background-color: yellow; 
}

我已經創建了一個Fiddle這表明如何利用這一點來創造平穩過渡。

來源

2017-06-29 09:03:17 Joel

您還可以使用$.animate()

但是使用動畫不能設置顏色值，但只有數字值，或使用「切換的。 w3對於使用it有很好的指導。

$(function() { 
    var on = true; 
    $('#lights').on('click', function() { 

     if (on) { 
      $("#lights").animate({ 
       width: 100, 
       height: 100 
      }, 1000); 
     } else { 
      $("#lights").animate({ 
       width: 200, 
       height: 200 
      }, 1000); 
     } 
    on = !on; 
    }); 
})

我創建了一個元素的大小一個fiddle

來源

2017-06-29 09:48:42 Zeliax

如何減慢函數中的onclick事件或使它們逐漸發生？尋找平穩過渡

回答

相關問題