難以設置jQuery中的CSS（）方法中的語句

我想要做的是在單擊按鈕時將邊框頂部左半徑（80像素）設置爲矩形框，然後2秒我希望border-right-right-radius爲100px。現在，直到這一切，一切正常。但是，當我試圖設置border-radius返回到0px時，它不起作用。它爲什麼沒有工作？請解決我的問題！難以設置jQuery中的CSS（）方法中的語句

〜對不起，我的英語不好，太謝謝你了〜這裏是我的代碼的HTML：

<div class="box"> A Box! </div> 
<button class="css"> Slice The Box! </button>

爲箱體的CSS：

.box{ 
    background: #d05200; 
    color: white; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    line-height: 95px; 
    margin-bottom: 20px; 
} 
    button{ 
    border: 1px solid #ff6800; 
    background: #db7732; 
    color: #fff; 
    width: 180px; 
    height: 45px; 
    border-radius: 5px; 
    font-size: 18px; 
    cursor: pointer; 
    margin-bottom: 20px; 
}

這裏是jQuery的：

$(".css").click(function(){ 
    if($(".box").css("borderTopLeftRadius") == "0px"){ 
     $(".box").css("borderTopLeftRadius", "80px"); 
    } 
    if($(".box").css("borderTopLeftRadius") == "80px"){ 
     setTimeout(function(){ 
      $('.box').css('borderBottomRightRadius','100px'); 
     }, 2000); 
     } 

    if($(".box").css("borderBottomRightRadius") == "100px"){ 
     setTimeout(function(){ 
     $('.box').css('borderRadius', '0px'); 
     }, 1000); 
    } 

});

來源

2016-11-19 Tarif Chandan

你期待的流走0至80，等待2秒，80至100，等待一秒鐘，然後回到0 ？如果是這樣，那不是什麼setTimeout。 setTimeout創建一個並行進程，它將在提供的時間過後運行。它不會暫停你的邏輯。如果你想讓事情按順序運行，你必須將你的邏輯嵌套在受尊敬的setTimeouts中，以便在他們應該運行時運行。 – Taplar

似乎按預期工作 - > https://jsfiddle.net/fr5tjtbw/請注意，第二次單擊時，值爲80px，第一次和最後一次超時均運行 – adeneo

以下是解決方法 - > https ：//jsfiddle.net/fr5tjtbw/1/ – adeneo

這裏是如果你想讓它按順序完成所有三個。

$(".css").click(function(){ 
 
    if($(".box").css("borderTopLeftRadius") == "0px"){ 
 
     $(".box").css("borderTopLeftRadius", "80px"); 
 

 
     setTimeout(function(){ 
 
      $('.box').css('borderBottomRightRadius','100px'); 
 

 
      setTimeout(function(){ 
 
      $('.box').css('borderRadius', '0px'); 
 
      }, 1000); 
 
     }, 2000); 
 
    } 
 
});

.box{ 
 
    background: #d05200; 
 
    color: white; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 95px; 
 
    margin-bottom: 20px; 
 
} 
 
    button{ 
 
    border: 1px solid #ff6800; 
 
    background: #db7732; 
 
    color: #fff; 
 
    width: 180px; 
 
    height: 45px; 
 
    border-radius: 5px; 
 
    font-size: 18px; 
 
    cursor: pointer; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> A Box! </div> 
 
<button class="css"> Slice The Box! </button>

來源

2016-11-19 15:32:00 Taplar

如果這確實是你所追求的，我會建議你看看做一個css過渡，只需添加/刪除相關的類來完成轉換。 – Taplar

謝謝你的回答和建議！ **豎起大拇指** –

試試這個

$(".css").click(function(){ 
if($(".box").css("borderTopLeftRadius") == "0px"){ 
    $(".box").css("borderTopLeftRadius", "80px"); 
} 
    if($(".box").css("borderTopLeftRadius") == "80px"){ 
      setTimeout(function(){ 
     $('.box').css('borderBottomRightRadius','100px'); 

      if($(".box").css("borderBottomRightRadius") == "100px"){ 
        setTimeout(function(){ 
    $('.box').css('borderRadius', '0px'); 
    }, 1000); 
    }, 2000); 
    } 
});

來源

2016-11-19 15:33:02 ScanQR

難以設置jQuery中的CSS（）方法中的語句

回答

相關問題