JQuery切換幫助

這裏的代碼打開一個div併爲其設置動畫..對嗎？是的，這對我很好...JQuery切換幫助

jQuery("a.trigger").click(function(){ 
    $("#main").animate({ 
     height: "+=300px" 
    }, 1500); 
    return false; 
});

我的問題是，我怎麼能切換它？我可以打開它，但我如何關閉它...意味着...在高度滑動200px。你懂我的意思嗎？我點擊「閱讀更多」（a.trigger），它的動畫高度+ 200px ..但我也想將它回退到-200px。

而我被卡住了，因爲我不是jQuery專家。我試圖使用SlideToggle或切換，但它並沒有爲我工作....

感謝您的幫助！

來源

2011-05-03 Marek123

這無關你的問題，但'return false'是隱含的，因爲JavaScript是多餘的如果不從函數返回值，則返回'undefined'，並且'false'和'undefined'都是falsy值。 – 2011-05-03 11:25:00

如果我正確地讀這篇文章，那麼這就是你想要什麼做。

http://jsfiddle.net/JqN4p/

來源

2011-05-03 11:25:34 netbrain

當然，但我的div有一個固定的高度設置....這是一個問題？ – Marek123 2011-05-03 11:27:35

不，它不會，如下所示：http://jsfiddle.net/JqN4p/1/ – netbrain 2011-05-03 11:29:50

不，我的意思是inital狀態...該div已經470px，我想擴大約。 300px更多（滑動） – Marek123 2011-05-03 11:31:39

瑪貝通過設置保持狀態

jQuery("a.trigger").click(function(){ 
    if (!$("#main").is(".open")) { 
     $("#main").animate({ 
      height: "+=300px" 
     }, 1500).addClass('open'); 
    } else { 
     $("#main").animate({ 
      height: "-=300px" 
     }, 1500).removeClass('open'); 
    } 
    return false; 
});

來源

2011-05-03 11:23:40 DanielB

會嘗試！ thx – Marek123 2011-05-03 11:25:03

完美！它工作得很好！正是我想要的。 :) – Marek123 2011-05-03 11:26:07

jQuery("a.trigger").toggle(function() 
{ 
    $("#main").animate (... height+=300)); 
}, function() 
{ 
    $("#main").animate (... height-=300)); 
});

或者您可以使用的slideToggle類：

jQuery("a.trigger").click(function(){ $("#main").slideToggle(); });

來源

2011-05-03 11:24:26

也與固定的高度爲div？我的#main div在css中的起始高度爲472px？ – Marek123 2011-05-03 11:28:08

如果你想讓你的div部分滑落，那麼你應該去找第一個代碼，如果你想讓它完全滑下來，第二個代碼可以工作。 – 2011-05-03 11:32:23

您正在尋找的切換功能。

jQuery("a.trigger").toggle(function(){ 
    $("#main").animate({ 
    height: "+=300px" 
    }, 1500); 
    return false; 
    }, function(){ 
    $("#main").animate({ 
    height: "-=300px" 
    }, 1500); 
    return false; 
});

來源

2011-05-03 11:29:57 graydot

也適用，thx :) – Marek123 2011-05-03 11:38:12

jQuery("a.trigger").click(function(){ 
    if($("#main").hasClass('active')) 
     value = -300; 
    else 
     value = 300; 
    $("#main").addClass('active').animate({ 
     height: "+=" + value + 'px' 
    }, 1500); 
    return false; 
});

這裏的工作小提琴 http://jsfiddle.net/QVJPZ/

來源

2011-05-03 11:34:43 Andre

的jQuery的slideToggle會爲你很好地做到這一點：

$('a.trigger').click(function() { 
    $('#main').slideToggle('slow', function() { 
    // Animation complete. 
    }); 
});

http://api.jquery.com/slideToggle/

來源

2011-05-03 11:34:53 Craig

JQuery切換幫助

回答

相關問題