Jquery滑動問題

Question

好的，下面的代碼的目標是讓左上角向下滑動並使右下側向上滑動。

$(document).ready(function() { 
 
    $("#slider").click(function() { 
 
    /*LEFT-SIDE*/ 
 
    $("#top-left").slideDown(2000); 
 
    $("#main-left").slideUp(7000); 
 
    /*RIGHT SIDE*/ 
 
    $("#main-right").slideDown(2000); 
 
    $("#bottom-right").slideUp(2000); 
 
    }); 
 
});

body { 
 
    background-color: gray; 
 
    margin: 0px; 
 
    margin-top: -15px; 
 
    /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/ 
 
} 
 
#top-left { 
 
    display: none; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: green; 
 
    padding-bottom: 100%; 
 
    z-index: 1000; 
 
} 
 
#bottom-right { 
 
    display: none; 
 
    background-color: gray; 
 
    padding-bottom: 100%; 
 
    z-index: 1000; 
 
} 
 
#main-left { 
 
    padding-top: 50px; 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    z-index: -10; 
 
} 
 
#main-right { 
 
    float: right; 
 
    background-color: red; 
 
    width: 50%; 
 
    padding-bottom: 100%; 
 
    z-index: -10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="complete-left-side"> 
 
    <section id="top-left"> 
 
    <p>Hidden Content</p> 
 
    </section> 
 

 
    <section id="main-left"> 
 
    <p>Main Content</p> 
 
    <button id="slider">Press Me!</button> 
 
    </section> 
 

 
</section> 
 
<section id="complete-right-side"> 
 
    <section id="bottom-right"> 
 
    <p>More hidden Content</p> 
 
    </section> 
 

 
    <section id="main-right"> 
 
    <p>Side Content</p> 
 
    </section> 
 
</section>

的問題是，無論何時按下按鈕按預期右下部不向上滑動。

預先感謝您對誰在這個問題:)

Answer 1

你應該按照以下方式在Jquery中進行更改。因爲slideUp會隱藏div，而你試圖顯示div。

並申請CSS來float: right; width: 50%;到#bottom-right

<section id="main-right"> 
    <p>Side Content</p> 
    </section> 
    <section id="bottom-right"> 
    <p>More hidden Content</p> 
    </section> 

而且還從主DIV的底部更改序列如上因爲右下角DIV幻燈片。

$(document).ready(function() { 
 
    $("#slider").click(function() { 
 
    /*LEFT-SIDE*/ 
 
    $("#top-left").slideDown(2000); 
 
    $("#main-left").slideUp(7000); 
 
    /*RIGHT SIDE*/ 
 
    $("#main-right").slideUp(2500); //Here 
 
    $("#bottom-right").slideDown(2500); //Here 
 
    }); 
 
});

body { 
 
    background-color: gray; 
 
    margin: 0px; 
 
    margin-top: -15px; 
 
    /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/ 
 
} 
 
#top-left { 
 
    display: none; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: green; 
 
    padding-bottom: 100%; 
 
    z-index: 1000; 
 
} 
 
#bottom-right { 
 
    display: none; 
 
    background-color: gray; 
 
    z-index: 1000; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#main-left { 
 
    padding-top: 50px; 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    z-index: -10; 
 
} 
 
#main-right { 
 
    float: right; 
 
    background-color: red; 
 
    width: 50%; 
 
    padding-bottom: 100%; 
 
    z-index: -10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="complete-left-side"> 
 
    <section id="top-left"> 
 
    <p>Hidden Content</p> 
 
    </section> 
 

 
    <section id="main-left"> 
 
    <p>Main Content</p> 
 
    <button id="slider">Press Me!</button> 
 
    </section> 
 

 
</section> 
 
<section id="complete-right-side"> 
 
    
 

 
    <section id="main-right"> 
 
    <p>Side Content</p> 
 
    </section> 
 
    <section id="bottom-right"> 
 
    <p>More hidden Content</p> 
 
    </section> 
 
</section>

Answer 2

回答或評論，您需要更改給

的時間間隔像

$(document).ready(function() { 
    $("#slider").click(function() { 
    /*LEFT-SIDE*/ 
    $("#top-left").slideDown(2000); 
    $("#main-left").slideUp(1000); 
    /*RIGHT SIDE*/ 
    $("#main-right").slideDown(2000); 
    $("#bottom-right").slideUp(2000); 
    }); 
}); 

結帳這個Demo

Answer 3

變化你的功能

$(document).ready(function() { 
    $("#slider").click(function() { 
    /*LEFT-SIDE*/ 
    $("#top-left").slideDown(2000); 
    $("#main-left").slideUp(1000); 
    /*RIGHT SIDE*/ 
    $("#main-right").slideUp(2000);// Change Here 
    $("#bottom-right").slideDown(2000);// Change Here 
    }); 
}); 

https://jsfiddle.net/xbr1xcxh/4/

Answer 4

$(document).ready(function() { 
 
    $("#slider").click(function() { 
 
    /*LEFT-SIDE*/ 
 
    $("#top-left").slideDown(2000); 
 
    $("#main-left").slideUp(7000); 
 
    /*RIGHT SIDE*/ 
 
    $("#bottom-right").slideUp(2000); 
 
    $("#main-right").slideUp(2000); 
 
    }); 
 
});

body { 
 
    background-color: gray; 
 
    margin: 0px; 
 
    margin-top: -15px; 
 
    /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/ 
 
} 
 
#top-left { 
 
    display: none; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: green; 
 
    padding-bottom: 100%; 
 
    z-index: 1000; 
 
} 
 
#bottom-right { 
 
    display: none; 
 
    background-color: gray; 
 
    padding-bottom: 100%; 
 
    z-index: 2000; 
 
} 
 
#main-left { 
 
    padding-top: 50px; 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    z-index: -10; 
 
} 
 
#main-right { 
 
    float: right; 
 
    background-color: red; 
 
    width: 50%; 
 
    padding-bottom: 100%; 
 
    z-index: -10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="complete-left-side"> 
 
    <section id="top-left"> 
 
    <p>Hidden Content</p> 
 
    </section> 
 

 
    <section id="main-left"> 
 
    <p>Main Content</p> 
 
    <button id="slider">Press Me!</button> 
 
    </section> 
 

 
</section> 
 
<section id="complete-right-side"> 
 
    <section id="bottom-right"> 
 
    <p>More hidden Content</p> 
 
    </section> 
 

 
    <section id="main-right"> 
 
    <p>Side Content</p> 
 
    </section> 
 
</section>

請檢查。我認爲這是你正在尋找的東西。