jQuery的UI - 滑出和推相鄰的內容超過

我對jQuery UI相當新，我試圖做一個簡單的動畫。當動畫被觸發時，我想要一個按鈕滑出並將其旁邊的任何內容推入以填充空間。jQuery的UI - 滑出和推相鄰的內容超過

使用幻燈片動畫，我設法讓按鈕滑出，但內容彈出到新的位置，而不是被滑動按鈕推過。作爲一個額外的問題，在完成幻燈片動畫之後，按鈕似乎會彈出完整大小。

問：如何在滑過當前佔據該空間的內容時滑出對象？

的jsfiddle http://jsfiddle.net/Dragonseer/z8mAY/

目前代碼

$("#deleteButton").hide(); 
$("#editButton").click(function() 
{ 
    $("#deleteButton").toggle("slide", { direction: "right" }, 1500);       
});

來源

2013-10-28 Dragonseer

以下是一張關於您的問題，但它使用CSS動畫，而不是jQuery的，它工作在現代瀏覽器和手機/平板電腦更好，但沒有這麼多的舊版本的IE： http://jsfiddle.net/z8mAY/21/

CSS：

div { 
    display: flex; 
} 

article { 
    width:100%; 
    margin: 5px; 
    transition: all 1s; 
} 

div button { 
    -moz-box-sizing: border-box; 
    width: 0; 
    transition: all 1s; 
    float:right; 
    overflow:hidden; 
    opacity:0; 
} 

.expanded article { 
    width: calc(70% - 5px); 

} 
.expanded button { 
    width: 30%; 
    opacity:1; 
}

JS：

$("#editButton").click(function() 
{ 
    $('div').toggleClass('expanded'); 
});

我儘可能地將它保持原樣，但在生產中，我可能會使用按鈕的相對/絕對定位，保持固定寬度，然後將其滑入。此外，您還需要使用所有您希望支持的CSS的瀏覽器前綴，我只包含了在Firefox中工作所需的瀏覽器前綴。

來源

2013-11-01 20:42:58

此解決方案對我來說最合適。謝謝！ – Dragonseer

這裏是一個可能的解決方案，以按鈕的滑動。這個按鈕的大小調整仍然存在一些奇怪的問題，但也許這對您而言是一個正確的方向。

$("#deleteButton").hide(); 
$("#editButton").click(function() 
{ 
    if($(this).hasClass("shown")){ 
     $(this).removeClass("shown"); 
     $(".par").animate({ 
      width: "100%" 
     }, 1000); 
     $("#deleteButton").delay(0).toggle("slide", { direction: "right" }, 800); 
    }else{ 
     $(this).addClass("shown"); 
     $(".par").animate({ 
      width: "75%" 
     }, 1000); 
     $("#deleteButton").delay(1000).toggle("slide", { direction: "right" }, 1000); 
    } 

});

http://jsfiddle.net/5GuwY/46/

它使用的容器上的最大高度，以確保該按鈕不能被看到，直到它進入人們的視野，或者已經滑出。

我敢肯定有很多方法可以改善這...

來源

2013-11-01 20:13:49 Blunderfest

以下是一張你的提琴：

http://jsfiddle.net/Jrv7m/

我用一個jQuery切換幫手，否則它只是標準jQuery的。

$("#editButton").toggleClick(
    function() { 
     $("article").animate({ width: '70%' }, animateOpts); 
     $("#deleteButton").show().animate({ right: 0, opacity: 1 }, { duration: 700, queue: false });    
    }, 
    function() { 
     $("article").animate({ width: '100%' }, animateOpts); 
     $("#deleteButton").animate({ right: '-100%', opacity: 0 }, { duration: 500, queue: false }, function() { $(this).hide(); }); 
    } 
);

來源

2013-11-01 20:27:13

如果您需要它在IE的舊版本中工作，您可以使用.animate()將隱藏溢出的刪除按鈕滑入和滑出div。

Working Example

腳本

$(function() { 
    $("#editButton").click(function() { 
     if ($("#deleteButton").offset().left > $('.new').offset().left + $('.new').width()) { // if the button is outside of the div 
      $('p').animate({ // animate the width of the text to 70% 
       width: '70%' 
      }, 1500); 
      $("#deleteButton").animate({ // and animate the delete button into the div 
       right: '0%' 
      }, 1500); 
     } else { // if the button is inside the div 
      $('p').animate({ //animate the width of the text to 100% 
       width: '100%' 
      }, 1500); 
      $("#deleteButton").animate({ //move the delete button back out of the div 
       right: '-32%' 
      }, 1500); 

     } 
    }); 
});

CSS

#deleteButton { 
    position:absolute; 
    top:0; 
    right:-32%; 
    width:30%; 
    height: 120px; 
} 
.new { 
    width:100%; 
    position:relative; 
    overflow:hidden; 
    padding-bottom: 6%; 
}

HTML

<button id="editButton">Toggle Edit Mode</button> 
<div class="new"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar aliquet ante, eu malesuada eros ornare a. Sed eleifend sit amet quam eget vehicula. Fusce viverra bibendum auctor. Quisque sed diam adipiscing, fringilla tortor quis, ullamcorper magna. Integer vel dapibus turpis, sed ullamcorper mauris.</p> 
    <button id="deleteButton">Delete</button> 
</div>

測試並在IE 7,8和9下工作

來源

2013-11-02 16:07:30 apaul

jQuery的UI - 滑出和推相鄰的內容超過

回答

相關問題