使用JQuery UI同時滑動兩個div，同時進行css轉換

當單擊箭頭時，我試着滑動「#left」div並讓「#arrowTab」div跟着它（同時滑動）。
#arrowTab div不應該滑出屏幕，但#left div應該。換句話說，當單擊箭頭時，#left div應該滑出視圖，並且#arrowTab div應該滑動到屏幕的左側。因此，再次單擊箭頭時，所有內容都可以滑回到右側。使用JQuery UI同時滑動兩個div，同時進行css轉換

另外，當點擊時，我希望箭頭以動畫方式左右旋轉（反之亦然）。

我嘗試了#arrowTab div的相對和固定位置，但都沒有正常工作。通過相對定位，它看起來像#arrowTab div跳轉，然後開始滑動。在固定的位置上它根本不動，然後消失。

這裏是我的小提琴： http://jsfiddle.net/erebel55/S5PaD/7/

CSS：

#left { 
    float: left; 
    width: 20%; 
    background-color: purple; 
    margin-top: 50px; 
    position: fixed; 
    height: 100%; 
    /*text wrapping*/ 
    word-wrap: break-word; 
} 

#arrow { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: -webkit-transform linear 300ms; 
    transition: transform linear 300ms; 
} 

#arrow.right { 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

#arrowTab { 
    background-color:limegreen; 
    border-radius: 0 6px 6px 0; 
    /*position: fixed;*/ 
    /*left: 20%*/ 
    position: relative; 
    left: 100%; 
    opacity: .6; 
}

JS：

$("#arrow").click(function() { 
     $("#left").toggle("slide", 1000).toggleClass('slid'); 
     $(this).toggleClass("right"); 
});

來源

2014-01-23 erebel55

因爲你的箭頭標籤的div在於你的左格內。動畫幻燈片結束後，左側消失（JQuery隱藏它）和您的箭頭標籤。拿出箭頭標籤，將它追加在左邊並且它可以工作。

更新後評論來自erebel55：

添加到您的CSS：

.wrapper { 
    overflow: hidden; 
}

改變你的Javascript成這樣：

$("#arrow").click(function() { 
    if($(this).hasClass("right")) { 
     $("#left").animate({"left": '0'}).toggleClass('slid'); 
    } else { 
     $("#left").animate({"left": '-20%'}).toggleClass('slid');  
    } 

    $(this).toggleClass("right"); 
});

我所做的：

我把你的切換變成了動畫吃了JQuery的功能。現在，您的#left div向左移動，而不是被縮小和隱藏。另外，我檢查你的#arrow是否有一個名爲'right'的類。如果爲true，則#left div將移動到右側，否則它將移動到左側。另外：overflow：hidden'隱藏'移動的#left div而不使其不可見。

來源

2014-01-23 22:36:42

對不起，我鏈接到錯誤的jsfiddle修訂（現在更新）。這對固定定位有意義。親戚的問題是否一樣？ – erebel55

因爲我希望它們一起移動，所以我將箭頭Tab div放在左邊的div中。（這就是爲什麼我將arrowTab的位置設置爲左）。如果我將它從左邊的div中取出，它在左側幻燈片時不會移動。 – erebel55

使用JQuery UI同時滑動兩個div，同時進行css轉換

回答

相關問題