追加元素與jQuery同步CSS過渡延遲

我需要能夠將我的菜單中相對定位的元素附加到絕對定位的下拉菜單。這對於jQuery來說很好 - 但是，在下拉菜單中存在一個CSS轉換延遲，而且我很難找出一個乾淨的方式來處理附加操作，以便它與下拉菜單變爲活動狀態同步。追加元素與jQuery同步CSS過渡延遲

在下拉菜單變爲活動狀態之前，頂層菜單有500ms的轉換延遲。我需要確保「block」元素的jQuery append與此同步。有沒有人有任何指導方法來處理這個問題？我沒有靈活性來修改標記。

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

如果它是相同的塊爲什麼你從標題中刪除它並將其附加到李？它不能在'header'和'li'中出現 – karthick

爲什麼要從.header刪除.block並將其添加到李和再刪除它，我不知道。如果它需要永遠在場。我的猜測是你正在尋找克隆。

看看下面的代碼片段解決你的目的

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

追加元素與jQuery同步CSS過渡延遲

回答

相關問題