用JQuery旋轉元素

Question

我正在創建一個基本佈局來測試我的知識。我一直在創建一個菜單，我決定定製它。每次用戶點擊它時，我想旋轉90度由3條垂直線組成的圖標（此圖標只有在智能手機上支付頁面時纔可見 - @media（max-size：968px）。此圖標顯示菜單當我點擊它的時候，我讀了如何通過googling來做到這一點，但我還沒有找到答案，我必須使用CSS或動畫嗎？我可以通過旋轉方法到達目標嗎？你能告訴我正確的方法嗎？ ？我不知道如何使用它們旋轉的圖標。

$(function(){ 
 
    var degree = 45; 
 
    var $buttonNav = $('.header__icon-bar'); 
 
    $buttonNav.on('click', function(e){ 
 
    e.preventDefault(); 
 
    $('.header__nav').toggleClass('is-open'); 
 
    });//end of $buttonNav 
 
});//end of the start

/*---------- 
 
GENERAL 
 
-----------*/ 
 
html,body { height: 100%; width: 100%;margin: 0; padding: 0;} 
 

 
body{ background: #eee; } 
 

 

 
/*---------- 
 
HEADER 
 
-----------*/ 
 
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;} 
 
.header__nav__item{ display: inline-block; margin: 0; } 
 
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;} 
 
.header__nav__item a:hover { background: #ff3333; } 
 

 

 

 

 

 

 
/*---------- 
 
icon-bar 
 
-----------*/ 
 
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;} 
 
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;} 
 
.header__background{display: none; height: 0px; background-color: #333; margin: 0;} 
 

 
@media(max-width: 960px) { 
 
    /*header-Menu*/ 
 
.header{ width: 100%; padding: 0; margin: 0;} 
 
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar} 
 
.header__nav__item { display: block; padding: 20px; margin: 0;} 
 
.header__nav__item a{ width: 100%;padding-right: 100%;} 
 

 
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;} 
 

 
/*button of spaun menu(nav)*/ 
 
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;} 
 
.header__background{display: block; background-color:#333; height: 60px; width: 100%} 
 

 

 

 

 

 
} 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
*/ 
 
/*---------- 
 
CLEARFIX 
 
-----------*/ 
 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="header clearfix"> 
 
    <div class="header__background"> 
 

 
    <a class="header__icon-bar" href=""> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 
    </a> 
 
</div> 
 

 

 
    <ul class="header__nav"> 
 
     <li class="header__nav__item"> <a href="#"> Home </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Contact </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Apply </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> About </a> </li> 
 
    </ul> 
 

 

 
</header>

Answer 1

這可以通過CSS3的完成轉換。

$(function(){ 
 
    var degree = 45; 
 
    var $buttonNav = $('.header__icon-bar'); 
 
    $buttonNav.on('click', function(e){ 
 
    e.preventDefault(); 
 
    $('.header__nav').toggleClass('is-open'); 
 
    $('.header__icon-bar').toggleClass('rotate90') 
 
    });//end of $buttonNav 
 
});//end of the start

.rotate90 { 
 
    -ms-transform: rotate(90deg); /* IE 9 */ 
 
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(90deg); 
 
} 
 

 

 
/*---------- 
 
GENERAL 
 
-----------*/ 
 
html,body { height: 100%; width: 100%;margin: 0; padding: 0;} 
 

 
body{ background: #eee; } 
 

 

 
/*---------- 
 
HEADER 
 
-----------*/ 
 
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;} 
 
.header__nav__item{ display: inline-block; margin: 0; } 
 
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;} 
 
.header__nav__item a:hover { background: #ff3333; } 
 

 

 

 

 

 

 
/*---------- 
 
icon-bar 
 
-----------*/ 
 
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;} 
 
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;} 
 
.header__background{display: none; height: 0px; background-color: #333; margin: 0;} 
 

 
@media(max-width: 960px) { 
 
    /*header-Menu*/ 
 
.header{ width: 100%; padding: 0; margin: 0;} 
 
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar} 
 
.header__nav__item { display: block; padding: 20px; margin: 0;} 
 
.header__nav__item a{ width: 100%;padding-right: 100%;} 
 

 
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;} 
 

 
/*button of spaun menu(nav)*/ 
 
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;} 
 
.header__background{display: block; background-color:#333; height: 60px; width: 100%} 
 

 

 

 

 

 
} 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
*/ 
 
/*---------- 
 
CLEARFIX 
 
-----------*/ 
 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="header clearfix"> 
 
    <div class="header__background"> 
 

 
    <a class="header__icon-bar" href=""> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 
    </a> 
 
</div> 
 

 

 
    <ul class="header__nav"> 
 
     <li class="header__nav__item"> <a href="#"> Home </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Contact </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Apply </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> About </a> </li> 
 
    </ul> 
 

 

 
</header>

Answer 2

$(function(){ 
    var degree = 45; 
    var $buttonNav = $('.header__icon-bar'); 
    $buttonNav.on('click', function(e){ 
    e.preventDefault(); 
    $('.header__nav').toggleClass('is-open'); 
    if($('.header__nav').hasClass('is-open')){ 
    $('.header__icon-bar').css('transform','rotate(90deg)') 
    }else{ 
    $('.header__icon-bar').css('transform','rotate(0deg)') 
    } 

    });//end of $buttonNav 
});//end of the start 

Answer 3

CSS變換可以做你的需要。爲每個「狀態」進行轉換。更改每個狀態更改的類別。如果有兩種狀態，則會有正常狀態和旋轉狀態。當用戶點擊3行時，班級從正常狀態變爲旋轉狀態。你需要一個onclick事件來檢查你點擊的img是普通類還是旋轉類。

if($('this').attr('class')=='normal'){ 
     ///switch to rotated class 
} 

如果圖像已被旋轉，則執行counter else語句。

if($('this').attr('class')=='rotatedl'){ 
    ///switch to normal class 
} 

ps這些類將調用您創建的變換關鍵幀！在調用使用它的類之前，需要創建關鍵幀轉換動畫。

https://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 4

您可以添加動畫，使其順利：

.animated { 
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes rotate-right { 
    from { 
    opacity: 0; 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 

    to { 
    opacity: 1; 
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
    } 
} 

查看全部demo

$(function(){ 
 
    var degree = 45; 
 
    var $buttonNav = $('.header__icon-bar'); 
 
    $buttonNav.on('click', function(e){ 
 
    e.preventDefault(); 
 
    $('.header__nav').toggleClass('is-open'); 
 

 
    if($('.header__icon-bar').hasClass('rotate-right')){ 
 
    $('.header__icon-bar').removeClass('rotate-right'); 
 
    $('.header__icon-bar').toggleClass('rotate-left'); 
 
    }else{ 
 
     $('.header__icon-bar').removeClass('rotate-left'); 
 
     $('.header__icon-bar').toggleClass('rotate-right'); 
 
    } 
 
    });//end of $buttonNav 
 
});//end of the start

/*---------- 
 
GENERAL 
 
-----------*/ 
 
html,body { height: 100%; width: 100%;margin: 0; padding: 0;} 
 

 
body{ background: #eee; } 
 

 

 
/*---------- 
 
HEADER 
 
-----------*/ 
 
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;} 
 
.header__nav__item{ display: inline-block; margin: 0; } 
 
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;} 
 
.header__nav__item a:hover { background: #ff3333; } 
 

 

 

 

 

 

 
/*---------- 
 
icon-bar 
 
-----------*/ 
 
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;} 
 
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;} 
 
.header__background{display: none; height: 0px; background-color: #333; margin: 0;} 
 

 
@media(max-width: 960px) { 
 
    /*header-Menu*/ 
 
.header{ width: 100%; padding: 0; margin: 0;} 
 
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar} 
 
.header__nav__item { display: block; padding: 20px; margin: 0;} 
 
.header__nav__item a{ width: 100%;padding-right: 100%;} 
 

 
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;} 
 

 
/*button of spaun menu(nav)*/ 
 
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;} 
 
.header__background{display: block; background-color:#333; height: 60px; width: 100%} 
 

 

 

 

 

 
} 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
*/ 
 
/*---------- 
 
CLEARFIX 
 
-----------*/ 
 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 
 

 
.animated { 
 
    -webkit-animation-duration: 0.5s; 
 
    animation-duration: 0.5s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 

 
    @-webkit-keyframes rotate-right { 
 
    from { 
 
opacity: 0; 
 
-ms-transform: rotate(0deg); 
 
-webkit-transform: rotate(0deg); 
 
transform: rotate(0deg); 
 
    } 
 

 
    to { 
 
opacity: 1; 
 
-ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    } 
 
} 
 

 
@keyframes rotate-right { 
 
    from { 
 
opacity: 0; 
 
-ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 

 
    to { 
 
opacity: 1; 
 
-ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    } 
 
} 
 

 
.rotate-right { 
 
    -webkit-animation-name: rotate-right; 
 
    animation-name: rotate-right; 
 
} 
 

 

 
@-webkit-keyframes rotate-left { 
 
    from { 
 
opacity: 0; 
 
-ms-transform: rotate(90deg); 
 
-webkit-transform: rotate(90deg); 
 
transform: rotate(90deg); 
 
    } 
 

 
    to { 
 
opacity: 1; 
 
-ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 

 
@keyframes rotate-left { 
 
    from { 
 
opacity: 0; 
 
-ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    } 
 

 
    to { 
 
opacity: 1; 
 
-ms-transform: rotate(0deg); 
 
-webkit-transform: rotate(0deg); 
 
transform: rotate(0deg); 
 
    } 
 
} 
 

 
.rotate-left { 
 
    -webkit-animation-name: rotate-left; 
 
    animation-name: rotate-left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="header clearfix"> 
 
    <div class="header__background"> 
 

 
    <a class="header__icon-bar animated" href=""> 
 
     <span></span> 
 
     <span></span> 
 
     <span></span> 
 
    </a> 
 
</div> 
 

 

 
    <ul class="header__nav"> 
 
     <li class="header__nav__item"> <a href="#"> Home </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Contact </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> Apply </a> </li> 
 
     <li class="header__nav__item"> <a href="#"> About </a> </li> 
 
    </ul> 
 

 

 
</header>