Установить функцию показать / скрыть кнопку на медленной скорости jQuery

Question

Пожалуйста, установите эту функцию показать / скрыть кнопку на медленной скорости:

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

javascript jquery

0

jmsmarcelo 15 Дек 2015 в 21:33

Answer 1

Использование 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); });
  })
});

0

Gregg Duncan 15 Дек 2015 в 19:00

Answer 2

Используя jQuery вы можете сделать это следующим образом. fadeIn() показывает и fadeOut() скрывает элемент в течение заданного времени. Надеюсь, что это поможет вам.

$('#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>

0

Ibrahim Khan 15 Дек 2015 в 18:47

Answer 3

Для этого вам нужно будет включить версию jQuery.

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

Например, чтобы оживить его исчезновение (медленно)

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

Или же

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

0

nestedl00p 15 Дек 2015 в 18:45

Установить функцию показать / скрыть кнопку на медленной скорости jQuery

3 ответа

Похожие вопросы

Новые вопросы

javascript