jQuery - 隱藏div，然後點擊顯示

所以我有一個div，我想從另一個div後面單擊箭頭時滑下 - 然後在點擊表單按鈕後再次隱藏。我可以編寫大部分代碼，但是我不明白如何從視圖中隱藏div，然後使用slideToggle將其下拉。jQuery - 隱藏div，然後點擊顯示

編輯：正如下面的人建議（謝謝），事實證明slideToggle（）不是我所需要的，而是animate（） - 下面的代碼似乎不工作，我添加了一個鏈接到jQuery用戶界面，但仍然沒有。

HTML

<div class="schedule"> 
     <div class="scheduletop"> 
      <a href="/"><img src="/images/audit.png"></a> 
     </div><!-- .scheduletop --> 
     <div class="schedulebottom"> 
      <?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?> 
     </div><!-- .schedulebutton --> 
     <div class="thestuff"> 
      <h3>TEST!</h3> 
     <div class="slide"> 
      CLICK TEST TO SLIDE 
     </div><!-- .slide --> 
     </div><!-- .thestuff --> 
    </div><!-- .schedule -->

jQuery的

$(document).ready(function() { 
$(".slide").click(function() { 
     $(".thestuff").animate({"down": "150px"}, "slow"); 
    }); 
});

任何想法？

來源

2013-03-27 Nikki Mather

'.slideToggle（）'只是動畫元素的高度。您可能想使用'.animate（）'來更改元素的位置。 – j08691 2013-03-27 15:48:55

請不要在編輯時刪除最初的請求 – G3z 2013-03-27 16:56:30

slideToggle()不是你應該在這種情況下使用的功能。它只會改變匹配元素的高度，另一方面.animate()方法可以將div移動到所需的方向，但在動畫完成時它不會隱藏元素，所以如果您想要使用回調實現這一目標。如果您想將div放在另一個div後面，則應該使用z-index css屬性。

來源

2013-03-27 15:58:00

謝謝。我仍然不完全確定回調函數是什麼;我是jQuery的新手。我有的新代碼是在下面，但它不會動畫，因爲它應該。（「。thestuff」）。click（function（）{{0} {0} {0}（「。slide」）。$（document.ready）animate（「{height」：「150px」}，「slow」）; }）; }）; – 2013-03-27 16:01:17

如果你想移動你的div，那麼你應該用一個負數動畫邊距，比如'animate（{marginTop：'-150px'}，slow）;'，這會使你的div向上移動150px。回調函數基本上是一個在動畫完成時調用的函數。 jQuery animate（）有一個屬性，名爲'complete'來處理回調。你可以在http://api.jquery.com/animate/ – 2013-03-27 18:16:12

正如你被告知你應該使用.animate（）。
我已經做了一個簡單的例子here。
這裏是js代碼

$(document).ready(function() { 
    $(".thestuff").click(function() { 
     $el = $(this).find(".slide"); 
     if (!$el.data('up')) { 
      var h3Margin = parseInt($(this).children().eq(0).height(), 10); 
      var margin = "-" + ($el.height() + h3Margin) + "px"; 
      $el.css("z-index", -10); 
      $el.animate({ 
       "margin-top": margin 
      }); 
      $el.data('up', true); 
     } else { 
      $el.animate({ 
       "margin-top": 0 
      }, { 
       complete: function() { 
        $el.css("z-index", 1); 
       } 
      }); 

      $el.data('up', false); 
     } 
    }); 
});

你也可以使用不透明的，而不是的z-index但是這取決於你

來源

2013-03-27 16:37:02 G3z

上閱讀更多的主題。謝謝G3z。我在回答中發佈了一個jsfiddle，你能告訴我爲什麼使用你發佈的代碼而不是jsfiddle中的代碼更好？我是jQuery的新手，希望儘可能多地瞭解/學習。 – 2013-03-27 16:43:21

正如j08691指出的那樣，slideToggle（）調整元素的高度，但我沒有說明你想移動元素。我的代碼不是「更好」，它只是輸出一個不同的東西。如果你確定調整大小，你的代碼沒有問題 – G3z 2013-03-27 16:51:00

好的，非常感謝你的幫助，非常感謝。 – 2013-03-27 17:04:18

$(".slide").animate(
     { top: "+=150" }, 
     1000, 
     function() { 
      $(this).hide(); 
     } 
    );

上面的代碼將通過提高「頂級動畫的DIV下來150像素「屬性。然後，當它完成動畫時，它會隱藏你的.slide div。

編輯：的「1000」在那裏說，需要1秒鐘完成動畫。

EDIT2：哦，還要確保.slide具有屬性「位置」設置爲「相對」。

來源

2013-03-27 16:37:09 Danwilliger

謝謝你的回答，會給你一個答案！我很好奇，至於爲什麼我上面發佈的代碼工作正常 - 是否有任何理由爲什麼我應該使用slideToggle（）我張貼在jsfiddle上的動畫？ – 2013-03-27 16:41:40

slideToggle（）使元素擠成一團。所以如果它起始於400px高，那麼它會逐漸擠壓到0px高。如果這是所需的效果，那就去做吧。 http://jsfiddle.net/Dtwigs/wJfDr/看看這是你想要的。如果不能幫助我理解你要做什麼，我會幫忙的。 – Danwilliger 2013-03-27 16:45:45

嗨丹，想法是簡單地滑動打開div，然後關閉一旦提交按鈕在表單被按下。顯然，在這種情況下，slideToggle（）只能用於一次點擊 - 你能告訴我，考慮到這一點，如果我更好地使用你的代碼或我在jsfiddle中發佈的代碼？非常感謝！ – 2013-03-27 17:05:51

好吧，看來我可以用slideToggle（）完成後期工作，我只需將主內容容器設置爲不顯示直到單擊（添加顯示：無; CSS）。

$(document).ready(function() { 
$(".slide").click(function() { 
    $(".thestuff").slideToggle("slow"); 
    }); 
});

對於任何人誰可能試圖找到一個類似的解決方案檢查jsfiddle

來源

2013-03-27 16:40:36

jQuery - 隱藏div，然後點擊顯示

回答

相關問題