CSS移行遅延と同期してjQueryで要素を追加

絶対配置されたドロップダウンメニューにメニュー内の相対配置要素を追加できるようにする必要があります。これはjQueryとは関係ありませんが、ドロップダウンメニューにはCSSの遷移の遅延があり、ドロップダウンメニューがアクティブになるように、追加を処理するクリーンな方法を見つけるのが難しいです。CSS移行遅延と同期してjQueryで要素を追加

トップレベルメニューには、ドロップダウンがアクティブになる前に500msの移行遅延があります。 jQueryの "block"要素の追加がこれと同期して動作することを確認する必要があります。誰かがこれを処理するための良い方法のための任意の指導を持っていますか？私はマークアップを再加工する柔軟性がありません。

jQuery(document).ready(function($) { 
 

 
    $('.main-menu > li').on({ 
 
    mouseenter: function() { 
 
     $(this).addClass('active'); 
 

 
     $('.block').appendTo($(this).find('.dropdown')); 
 

 
    }, 
 
    mouseleave: function() { 
 
     $(this).removeClass('active'); 
 

 
     $('.block').appendTo('.header'); 
 
    } 
 
    }) 
 

 
});

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    overflow-y: scroll; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.main-menu { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    background: yellow; 
 
} 
 

 
.dropdown { 
 
    opacity: 0; 
 
    transition: all 200ms ease-in-out 200ms; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    width: 100vw; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    z-index: 20; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 

 
li.active .dropdown { 
 
    transition: all 0s linear 500ms; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.block { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<body> 
 

 
    <header class="header"> 
 
    <ul class="main-menu"> 
 
     <li> 
 
     <a href="/test">Test</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 2</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 3</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 4</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 5</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 6</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 7</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 8</a> 
 
     </li> 
 
    </ul> 
 
    <div class="block"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas 
 
     at lorem non hendrerit.</p> 
 
    </div> 
 
    </header> 
 

 
    <div class="container"> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    </div> 
 

 
</body>

出典

2017-05-25 Tom Russell

同じブロックの場合は、それをヘッダーから削除してliに貼り付けるのはなぜですか？それは 'ヘッダ'と '李'の両方に存在することはできません – karthick

あなたは.headerから.blockを削除するとLiに追加して、もう一度それを削除したい理由は私はわかりません。それが常に存在する必要がある場合。私の推測では、あなたはクローンを探しています。以下のあなたの目的解決スニペット場合

は、参照してください

jQuery(document).ready(function($) { 
 

 
$('.block').clone().appendTo($('li').find('.dropdown')); 
 
$('.main-menu > li').on({ 
 
    mouseenter: function() { 
 
     $(this).addClass('active'); 
 
    }, 
 
    mouseleave: function() { 
 
     $(this).removeClass('active'); 
 
    } 
 
    }) 
 
    
 

 
});

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    overflow-y: scroll; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.main-menu { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    background: yellow; 
 
} 
 

 
.dropdown { 
 
    opacity: 0; 
 
    transition: all 200ms ease-in-out 200ms; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    width: 100vw; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    z-index: 20; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 

 
li.active .dropdown { 
 
    transition: all 0s linear 500ms; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.block { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<body> 
 

 
    <header class="header"> 
 
    <ul class="main-menu"> 
 
     <li> 
 
     <a href="/test">Test</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 2</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 3</a> 
 
     <div class="dropdown"> 
 
      <div class="wrapper"> 
 
      <div class="menu-subcategory"> 
 
       <h4><a href="/sub">Sub Cat</a></h4> 
 
       <ul> 
 
       <li> 
 
        <a href="/test">Test</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 3</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 4</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 5</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 6</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 7</a> 
 
       </li> 
 
       <li> 
 
        <a href="/test">Test 8</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 4</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 5</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 6</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 7</a> 
 
     </li> 
 
     <li> 
 
     <a href="/test">Test 8</a> 
 
     </li> 
 
    </ul> 
 
    <div class="block"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas 
 
     at lorem non hendrerit.</p> 
 
    </div> 
 
    </header> 
 

 
    <div class="container"> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec 
 
     dui. Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at 
 
     lorem non hendrerit.</p> 
 
    </div> 
 

 
</body>

出典

2017-05-25 01:26:42 karthick

これは良い解決策のようです - 私はまもなくそれをテストし、受け入れます。私は各ドロップダウンで要素を複製することを避けようとしていたと思うが、私が見ることができる問題はない。 –

使い方 'transitionend' または 'animationend' イベントこのような程度： obj.addEventListener（ 'transitionend' のdoSomething ）; obj.addEventListener（ 'animationend'、doSomething）; Chrome、Safari、Operaで 'webkitTransitionEnd'と 'webkitAnimationEnd'を使用することもできます。

出典

2017-05-25 01:38:39

CSS移行遅延と同期してjQueryで要素を追加

答えて

関連する問題