Jquery 切换动画宽度。

Question

我需要我的 Jquery 代码来为 summary_box div 设置动画，以便它按以下方式滑动。

加载时，它将在浏览器窗口中打开，当单击 summary_button2 div 时，它将向右滑动(将宽度更改为 0)并绝望，并在再次单击按钮后再次出现。我有一些工作，但我不确定这是在做什么:(== 300 ? "0": "300px";)???

<script type="text/javascript">
$(document).ready( function(){
    $('#summary_button2').click( function() {
        var toggleWidth = $("#summary_box").width() == 300 ? "0" : "300px";
        $('#summary_box').animate({ width: toggleWidth });
    });
});
</script>

Answer 1

这是一个三元运算符，它基本上只是一个缩短的 if/else 语句:

if ( $("#summary_box").width() == 300 ) {
   var toggleWidth = '0';
}else{
   var toggleWidth = '300px';
}

作为旁注，jQuery 的 animate() 有一个可以做同样事情的切换选项:

$('#summary_box').animate({ width: 'toggle'}, 1000);

FIDDLE