6

我可以失明还是没有参数，选项或任何禁用动画的东西：

.toggle()

我只想通过切换（）来显示（）和隐藏（）它们，但是我使用的每个切换，滑动切换，淡入淡出甚至正常切换都带有动画。

如何“删除”它们？

4

7 回答 7

15

只需确保 toggle() 的参数解析为 true，而不是 1。

toggle(1); // animation 
toggle(true); // no animation.
于 2013-05-28T05:32:39.960 回答
8

如果未提供任何参数，则 toggle() 立即生效。

slideToggle() 和 fadeToggle() 使用动画的默认值，为了使它们立即生效，传递值 '0'；

这些都是一样的，只是显示和隐藏元素：

$('button').on('click', function() {
    ToggleElement.toggle();
});

$('button').on('click', function() {
    ToggleElement.slideToggle(0);
});

$('button').on('click', function() {
    ToggleElement.fadeToggle(0);
});

小提琴

然而，没有理由在没有动画的情况下使用底部的两个，因为这样就失去了意义。

更快一点是element.style.display = 'none'/'block'在 if / else 语句中使用原生 javascripts。

于 2012-04-30T15:35:42.403 回答
3

您始终可以提供自己的切换功能：

$.fn.quicktoggle = function() {
    this.each(function() {
        var $this = $(this);
        if ($this.is(':visible')) {
            $this.hide();
        } else {
            $this.show();
        }
    });
    return this;
};
于 2012-04-30T15:20:51.490 回答
3

只需使用不带参数的切换，它应该是立即的。

从文档：

在没有参数的情况下， .toggle() 方法只是切换元素的可见性：

$('.target').toggle();
于 2012-04-30T15:32:27.940 回答
2

直接关掉效果

jQuery.fx.off = true;
于 2013-05-04T20:36:12.540 回答
0

如果您想轻松替换代码中的所有实例，则更“强大”的方法是覆盖函数。

$.fn.slideToggle = function(duration, callback ) {
    duration = 0;
    callback = callback || function(){};
    this.toggle(duration, callback);
};

$.fn.fadeToggle = function(duration, callback) {
    duration = 0;
    callback = callback || function(){};
    this.toggle(duration, callback);
};

演示：http: //jsfiddle.net/bChVe/3/

于 2012-04-30T15:25:47.217 回答
0 

$('.clk').click(function(){

if(document.getElementById("ID").className == "p-cap hide")
{
   document.getElementById("ID").className = "p-cap show";
}
else
{
   document.getElementById("ID").className = "p-cap hide";
}

}); 
.p-cap { height:100px; width:100px; background :red; float:left; }

.clk { height:100px; width:100px; background :green; float:left; }

.hide { display: none; }

.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clk"></div>
<div id="ID" class="p-cap hide"></div>

于 2019-06-30T11:19:47.393 回答