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

Answer 2

这是三元操作 - 相当于此 -

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

MDN reference

Answer 3

这段代码如下所示：

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

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

有关详细信息，请参阅Ternary Operator。

Answer 4

检查StackOverflow上的this问题。

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

同时检查this小提琴。

<强> 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 });
});

Jquery切换动画宽度。

5 个答案: