Открыть и закрыть фиксированный ДИВ

Question

У меня есть фиксированный DIV на правой моей страницы, как это:

Это мой HTML:

<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a> 
<div class="tweetdetails" style="width: 0px;"> 
    <p class="screenname">@BachelorGDM</p><br> 
    <img src="linktoimage" alt="image_user"><br> 
    <p class="createdon">Created on: Mar 8, 2013</p><br> 
    <hr> 
    <p class="text">Here is some text</p> 
</div> 

Это мой CSS:

.tweetdetails{ 
    color:white; 
    padding:10px 50px; 
    position: fixed; 
    right:0px; 
    width:300px; 
    z-index: 999; 
    background-color: #FFF; 
    height:100%; 
    background-color: black; 
     border-left: 5px solid rgb(127,255,255); 
} 

.open{ 
    background-repeat: no-repeat; 
    background-size: 50px auto; 
    color:red; 
    position: fixed; 
    right:400px; 
    top:50%; 
} 

На моем Javascript есть:

$("#toggle").click(function(){ 
    $(".tweetdetails").animate({width:'0px'}, 500); 
    $("#toggle").animate({right: "-=300"}, 500); 
}) 

Но у меня всегда есть результат, как это:

Как я могу убедиться, что я не вижу ничего больше? (Я думаю, что это что-то делать с прокладкой ...)

Answer 1

Проверьте скрипку, если вы ленивы;) http://jsfiddle.net/tbleckert/UERHX/

Это потому, что ваша обивка сделает ДИВ 400px в ширину вместо 300px. Вы можете добавить ящик-проклейки к вашему DIV и добавить некоторые дополнительные ширины, как это:

.tweetdetails { 
    box-sizing: border-box; 
    width: 400px; // Since we added box-sizing 
} 

Коробка-проклейки будет убедиться, что DIV остается с шириной вы определяете. А затем оживите правый переключатель до -400px. Повторите, чтобы добавить префиксы поставщика к размеру окна (-moz и -webkit).

Но! Проблема все равно останется такой, что я предлагаю анимировать правильный атрибут вместо ширины. И это сработает.

Я предлагаю вам установить #toggle внутри .tweetdetails и абсолютное положение на внешней стороне. Таким образом, вам нужно будет сделать только одну анимацию, поскольку будет следовать #toggle. Также вы можете сделать это с помощью css-переходов, просто добавив вместо этого класс.

.tweetdetails { 
    right: -400px; 
    transition: 0.5s right; // Add vendor prefixes 
} 

.tweetdetails.open { 
    right: 0; 
} 

$('#toggle').click(function() { 
    $('.tweetdetails').toggleClass('open'); 
}); 

Я сделал скрипку, чтобы показать вам, что я имею в виду: http://jsfiddle.net/tbleckert/UERHX/

Как примечание стороны, вы не должны использовать идентификаторы в вашем CSS, но вы должны использовать их в JavaScript. Хорошая практика заключается в добавлении идентификаторов к элементам, которые, как вы знаете, будут использоваться в ваших сценариях (просто не сходите с ума, иногда применяются несколько элементов, и они должны быть классами, чтобы их можно было легко зацикливать).

Answer 2

Вы можете сделать его более динамичным, без магических чисел:

$(".tweetdetails").animate({width:'0px' , padding:'0px'}, 500); 
$("#toggle").animate({right: "-=" + ($(".tweetdetails").outerWidth()) }, 500); 

.outerWidth является width+padding+border, имеют вид: http://api.jquery.com/outerWidth/
(под редакцией, благодаря @tbleckert)

Answer 3

$(".tweetdetails").css('padding', '10px 0').animate({width:'0px'}, 500); 

Answer 4

Я думаю, это то, что вы хотите: http://jsfiddle.net/balintbako/XJbqD/

<a id="toggle" class="open"><img src="_styles/images/open_close.png" alt="openclose" /></a> 

<div class="tweetdetails" style="width: 0px;"> 
    <p class="screenname">@BachelorGDM</p> 
    <br/> 
    <img src="linktoimage" alt="image_user"></img> 
    <br/> 
    <p class="createdon">Created on: Mar 8, 2013</p> 
    <br/> 
    <hr/> 
    <p class="text">Here is some text</p> 
</div> 

CSS

.tweetdetails { 
    color:white; 
    position: fixed; 
    right:0px; 
    z-index: 999; 
    background-color: #FFF; 
    height:100%; 
    background-color: black; 
    border-left: 5px solid rgb(127, 255, 255); 
} 
.open { 
    background-repeat: no-repeat; 
    background-size: 50px auto; 
    color:red; 
    position: fixed; 
    right:5px; 
    top:50%; 
} 

JS

$("#toggle").click(function() { 
    if ($("#toggle").hasClass("opened")) { 
     $(".tweetdetails").animate({ 
      width: '0px', 
      padding: '0px' 
     }, 500); 
     $("#toggle").animate({ 
      right: "-=" + 400 
     }, 500); 
    } else { 
     $(".tweetdetails").animate({ 
      width: '300px', 
      padding: '10px 50px' 
     }, 500); 
     $("#toggle").animate({ 
      right: "+=" + 400 
     }, 500); 
    } 
    $("#toggle").toggleClass("opened"); 
});