jquery - Jquery 切换动画宽度。

Question

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

加载时它将在浏览器窗口上打开，当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';
}

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

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

小提琴

Answer 2

那就是三元运算——相当于这个——

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

MDN 参考

Answer 3

这段代码如下所示：

$("#summary_box").width() == 300 ? "0" : "300px";

如果 width() 等于 300，则返回 0，否则返回“300px”。

有关详细信息，请参阅三元运算符。

Answer 4

在 StackOverflow 上检查这个问题。

为您的尝试提供类似的解决方案。

也检查这个小提琴。

JS：

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? "0" : "300px";
        $('#toggle').animate({ width: toggleWidth });
    });
});

Answer 5

我试过了，效果很好

$("#searchIcon").click(function(){
    var toggleWidth = "0px";
    if($("#searchbox").width() == 118)
    {
        toggleWidth="0px";
    }
    else
    {
        toggleWidth="120px";
    }
    $('#searchbox').animate({ width: toggleWidth });
});