在慢速jQuery中设置功能显示/隐藏按钮

Set Function show/hide button in slow speed jQuery

本文关键字：显示 隐藏 按钮 功能 设置 jQuery      更新时间：2023-09-26

请将此功能设置为慢速显示/隐藏按钮：

<button id="trmtn" onclick="trclick(this);"><span id="nod_trmtn">[+]</span>File</button>

文件隐藏：

<div id="bd_trmtn" style="display: none">
HELLO!
</div>

此功能：

var d = document;
function trclick(a){
    var view,valbt;
    var c=d.getElementById('bd_'+a.id);
    var e=d.getElementById('nod_'+a.id);
    view=c.style.display;c.style.display=(view==''?'none':'');
    valbt=(view==''?'[+]':'[-]');
    e.innerHTML=valbt;
}

使用jQuery可以很容易地做到这一点http://jsfiddle.net/f92vczpm/

HTML:

<button id="trmtn"><span id="nod_trmtn">[+]</span>File</button>
<div id="bd_trmtn" style="display:none;">
HELLO!
</div>

Javascript：

$(function(){
    $('#trmtn').click(function(){
    // get the ID of the button that was clicked
    var thisID = $(this).attr('id');
    // determine if your button will have a plus or minus after the toggle
    spanText = $('#bd_' + thisID).is(':visible') ? "[+]": "[-]";
    // get a reference to the span tag so you can update it in the callback function
    span = $(this).find('span');
    // toggle the div with speed of "slow" for slow motion. then use callback function to change the button text
    $('#bd_' + thisID).slideToggle("slow", function(){ $(span).text(spanText); });
  })
});

为此，您必须包含一个版本的jQuery。

$('selector').hide(speed,callback);
$('selector').show(speed,callback);

例如动画其消失（缓慢）

$('element').hide(1000);

或

$("element").hide('slow');

使用jQuery，您可以按照以下方式进行操作。CCD_ 2显示并且CCD_ 3在给定时间内隐藏该元素。希望这对你有帮助。

$('#trmtn').click(function(){
    var bd = $('#bd_trmtn');
    if(!bd.is(':visible')){
        bd.fadeIn(2000); //take 2s to show
        $(this).find('#nod_trmtn').html('[-]');
    }else{
        bd.fadeOut(2000); //take 2s to hide
        $(this).find('#nod_trmtn').html('[+]');
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trmtn"><span id="nod_trmtn">[+]</span>File</button>
<div id="bd_trmtn" style="display: none">
     HELLO!
</div>

相关文章：