如何使側邊欄的交易更慢，jquery只點擊一次

我正在嘗試使用Jquery onclick事件製作推側欄，並且側邊欄切換主體寬度會有所不同。這就是我所做的遠。如何使側邊欄的交易更慢，jquery只點擊一次

$(".for-sidebar").click(function(){ 
 
    $(".sidebar-container").css({ 
 
    \t 'right' : '0px', 
 
    \t 'transition' : 'opacity 1s ease-in-out' 
 
    }); 
 
    $(".body-container").css("width","-=300px"); 
 
}); 
 
$(".sidebar-close").click(function(){ 
 
    $(".sidebar-container").css({ 
 
    \t 'right' : '-300px', 
 
    \t 'transition' : 'opacity 1s ease-in-out' 
 
    }); 
 
    $(".body-container").css("width","100%"); 
 
});

html,body{ 
 
    \t height:100%; 
 
    \t width:100%; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 
    .container{ 
 
    \t width: 100%; 
 
    } 
 
    .body-container{ 
 
    \t width: 100%; 
 
    } 
 
    .sidebar-container{ 
 
    \t width: 300px; 
 
    \t position: absolute; 
 
    \t top:0; 
 
    \t right: -300px; 
 
    \t background: #000; 
 
    \t color:#fff; 
 
    \t height:100%; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Push Sidebar</title> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="container"> 
 
    \t <div class="body-container"> 
 
      <h1>Hello, I am the body</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <button class="for-sidebar">open sidebar</button> 
 
    \t </div> 
 
    \t <div class="sidebar-container"> 
 
       <h1>Hello, I am the sidebar</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> 
 
      <button class="sidebar-close">close sidebar</button> 
 
    \t </div> 
 
    </div> 
 

 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
</body> 
 
</html>

我想只發生一次打開側邊欄點擊事件和側邊欄切換速度較慢。

來源

2016-12-22 Baladitya Panda

所以你的意思'open'側欄一次..即使他們關閉他們不能再次打開它..對不對？ –

不，我想第二次點擊「打開側邊欄」，它不會改變身體尺寸，因爲您可以檢查上面的代碼，它每次點擊打開側邊欄時都在變化 –

雅我看到了..讓我給我答案 –

使用.animate()可以在側邊欄上平滑地拉動它進出身體。

此外，我建議您在側欄打開時隱藏按鈕open sidebar。所以用戶根本沒有機會點擊它。

這裏是一個工作代碼。

$(".for-sidebar").click(function(){ 
 
    $(".sidebar-container").animate({"right":"0px"}, "slow"); 
 
    $(".body-container").css("width","-=300px"); 
 
    $(this).hide(); // hide on first click 
 
}); 
 
$(".sidebar-close").click(function(){ 
 
    $(".sidebar-container").animate({"right":"-300px"}, "slow"); 
 
    $(".body-container").css("width","100%"); 
 
    $(".for-sidebar").show(); // show when side bar is closed 
 
});

html,body{ 
 
    \t height:100%; 
 
    \t width:100%; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    } 
 
    .container{ 
 
    \t width: 100%; 
 
    } 
 
    .body-container{ 
 
    \t width: 100%; 
 
    } 
 
    .sidebar-container{ 
 
    \t width: 300px; 
 
    \t position: absolute; 
 
    \t top:0; 
 
    \t right: -300px; 
 
    \t background: #000; 
 
    \t color:#fff; 
 
    \t height:100%; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Push Sidebar</title> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="container"> 
 
    \t <div class="body-container"> 
 
      <h1>Hello, I am the body</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <button class="for-sidebar">open sidebar</button> 
 
    \t </div> 
 
    \t <div class="sidebar-container"> 
 
       <h1>Hello, I am the sidebar</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p> 
 
      <button class="sidebar-close">close sidebar</button> 
 
    \t </div> 
 
    </div> 
 

 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
</body> 
 
</html>

來源

2016-12-22 08:25:51

完美！謝謝:) –

@BaladityaPanda很樂意幫忙 –

如何使側邊欄的交易更慢，jquery只點擊一次

回答

相關問題