製作一個div慢慢滑下來不工作與jquery

基本上在這裏我試圖讓一個div慢慢滑下來點擊一個鏈接。 By，默認情況下，通過將display屬性設置爲none來隱藏div（見下文）。點擊後，div變爲可見（display-> block）並緩慢滑落。使用下面的js代碼，div簡單地顯示出來，沒有任何滑動移動。你可能認爲這很微不足道，但你的反饋對我很有幫助。謝謝。製作一個div慢慢滑下來不工作與jquery

<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;"> 
// contents inside the divs 
</div> 

<li class="menu-16246 last"> 
    <a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a> 
</li> 


<script> 
    function displaySubscription() { 
     // $('.js-app-container').css('display', 'block').fadeIn("slow", function() {}); 
     var node = document.getElementById('subscription_popup'); 
     if (node.style.display == 'block') { 
      // node.style.display = 'none'; 
      $('.js-app-container').css('display', 'none').fadeOut("slow", function() {}); 
     } else 
     // node.style.display = 'block' 
      $('.js-app-container').css('display', 'block').slideDown("slow", function() {}); 

    } 
</script>

來源

2016-04-29 Anay Bose

你設置一個小提琴或能plunkr？ –

也許你可以從不透明度創建動畫：0到不透明度：1，而滑下會有幫助。 –

Anay，顯示：block/none不適用於動畫。 – Aslam

您不需要在動畫之前設置css display。如果您沒有爲hide和show查找不同的動畫，則可以使用slideToggle或fadeToggle。

function displaySubscription() { 
 
    var node = $('#subscription_popup'); 
 
    if (node.is(':visible')) 
 
    $('.js-app-container').fadeOut("slow", function() {}); 
 
    else 
 
    $('.js-app-container').slideDown("slow", function() {}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="js-app-container" id="subscription_popup" style="padding-top: 70px; display: none;"> 
 
    // contents inside the divs 
 
</div> 
 

 
<li class="menu-16246 last"> 
 
    <a href="#" class="subscribe-link open_popup" onclick="displaySubscription();">Subscribe</a> 
 
</li>

來源

2016-04-29 06:54:59 RRK

你設置動畫之前的CSS display屬性有機會運行。試試這個：

<script type="text/javascript"> 

    function displaySubscription() { 
     // $('.js-app-container').css('display', 'block').fadeIn("slow", function() {}); 
     var node = $('#subscription_popup'); 
     if (node.is(':visible')) { 
      // node.style.display = 'none'; 
      $('.js-app-container').fadeOut("slow", function() {}); 
     } else 
     // node.style.display = 'block' 
      $('.js-app-container').slideDown("slow", function() {}); 

    } 

</script>

來源

2016-04-29 06:55:13 brut

剛剛從所有功能刪除所有的css('display','block')和css('display','none')，你不需要他們

來源

2016-04-29 06:57:11 Aslam

製作一個div慢慢滑下來不工作與jquery

回答

相關問題