私のdivはtoggleClass（）で左に移動しません

Question

クラスの設定をクリックすると、class settingsinでdivをターゲットにしてtoggleClassを使用してクラスの設定を行い、この.settingsinを実行すると、スワイプのトランジションで左に150ピクセル（左：-150ピクセル）移動する必要があります。

現在、何らかの理由でtoggleClassが機能していないため、divは.postitコンテナを残して左に移動せず、なぜわかりませんが、これはかなり単純なコードです。

ここにある：

$('.settingswheel').click(function(){ 
 
\t var t = $('.settingsin'); 
 
\t t.toggleClass('settingsout'); 
 
});

.postit { 
 
    position:absolute; 
 
    overflow:hidden; 
 
    left:1070px; 
 
    top:-155px; 
 
    padding-left:10px; 
 
    line-height: 1; 
 
    width: 275px;  
 
    margin: 0px;  
 
    min-height:250px; 
 
    max-height:250px; 
 
    padding-top:35px; 
 
    border:1px solid #E8E8E8; 
 
    border-top:60px solid #fdfd86; 
 
    font-family:'Reenie Beanie';  
 
    font-size:22px;  
 
    border-bottom-right-radius: 60px 5px; 
 
    display:inline-block;  
 
    background: #ffff88; /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ 
 
    background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
 
} 
 
    
 
.postit:after {  
 
    content: ""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    right:-0px; bottom:20px; 
 
    width:200px; 
 
    height: 25px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); 
 
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); 
 
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); 
 
     -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); 
 
    -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); 
 
     transform: matrix(-1, -0.1, 0, 1, 0, 0); 
 
} 
 

 

 

 
.settingswheel{ 
 
\t position:absolute; 
 
\t bottom:22px; 
 
\t right:15px; 
 
\t cursor:pointer; 
 
\t z-index:10001; 
 
} 
 

 

 
.settingsin{z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:15px; } 
 

 
.settingsout{z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:30px; transition: all 1.0s ease; } 
 

 
.menu{ 
 
\t list-style:none; 
 
\t bottom:8px; 
 
\t position:absolute; 
 
\t font-family: 'Covered By Your Grace', cursive; 
 
\t font-weight:300; 
 
\t width:200px; 
 
\t z-index:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="postit"> 
 
    <img class="settingswheel testRotate" src="https://cdn.pixabay.com/photo/2016/10/19/03/59/socialmedia-1752079_1280.png"> 
 
    <div class="settingsin" style="z-index:2; width:190px; height:150px; background-color:rgb(255, 255, 136); outline:1px solid red; position:absolute; left:5px;" ><span style="font-size:60px; font-family: 'Covered By Your Grace', cursive; position:absolute; left:15px; bottom:15px;">Ajustes</span></div> 
 
    <ul class="menu" > 
 
    <li style="font-size:22px;">Pantalla completa: <span id="fullscreentoggler" style="cursor:pointer;" value="F" onclick="toggleFullScreen()">si</span></li> 
 
\t <li style="font-size:22px; margin-top:8px;">Idioma: <span id="languagetoggler" style="cursor:pointer;" onclick="toggleLanguage()" >español</span></li> 
 
\t <li style="font-size:22px; margin-top:8px;">Diapositivas: <span class="resta" style="cursor:pointer;"> </span><span class="segundos">3s</span><span class="suma" style="cursor:pointer;"> ></span></li> 
 
    </ul> 
 
</div>

Answer 1

は、要素のタグのstyle属性を削除します。

<div class="settingsin">... 

また、ページがロードされた後にclickイベントが実行されていることを確認してください。