Как переключить видимость элемента без jQuery?

Я пишу шаблон аукциона для eBay, надеясь, что eBay позволит это. По-видимому, они не потому, что у jquery есть такие вещи, как string.replace() и т. Д.Как переключить видимость элемента без jQuery?

Код очень простой.

$(document).ready(function(){ 

    function changeImage(){ 
     if($("#coin1").css("display") == "none"){ 
      $("#coin1").fadeIn("slow"); 
     }else{ 
      $("#coin1").fadeOut("slow"); 
     } 
    }; 

    setInterval (changeImage, 5000); 
});

мне в принципе нужно переписать его в простой Javascript ...

источник

2010-01-15 Jared

Если вы можете жить без затухающего эффекта, оно должно быть довольно просто:

function changeImage() { 
    var image = document.getElementById('coin1'); 
    image.style.display = (image.style.display == 'none') ? 'block' : 'none'; 
} 

setInterval(changeImage, 5000);

Хотя выцветания прохладно и все это делает код намного сложнее, когда нам не разрешено использовать внешние библиотеки. В основном вам придется иметь дело с дополнительными таймерами, стрельбы с очень короткими интервалами, изменение непрозрачности целевого элемента при каждом обратном вызове.

Если вы действительно хотите выцветать, см. "Javascript Tutorial - Simple Fade Animation".

источник

2010-01-15 18:04:10

Спасибо! Я как бы искал эффект затухания, хотя ... – Jared

eBay не позволяет сценариям, которые могут заменять строки, изменять дополнительные параметры - нет, мне также не разрешено ссылаться извне, но даже если вы вставляете его прямо в свой кода, он не работает. – Jared

Я обновил свой ответ с дополнительной информацией о затухании, включая ссылку на простую реализацию в «обычном» JavaScript. –

Самый основной замирания, не кросс-браузерный (попробуйте в Chrome):

<div id="x" style="background-color: yellow;"> 
    <a href="#" onclick="fade();">fade me out</a> 
</div> 

<script type="text/javascript"> 
    var val = 1.0; 
    function fade() 
    { 
     document.getElementById('x').style.opacity = val; 
     val -= 0.1; 

     if (val != 0) 
     { 
      setInterval(fade, 100); 
     } 
    } 
</script>

источник

2010-01-15 18:13:32 Langdon

Вы можете использовать classList.toggle на вашем элементе:

<style> 
    .hidden { display: none !important; } 
</style> 

<script> 
    function toggle() { 
    document.getElementById('elem').classList.toggle('hidden'); 
    } 
</script> 

<a href="#" onclick="toggle()">Toggle element</a> 

<p id="elem">lorem ipsum quid modo tralala</p>

источник

2017-07-17 07:58:04

Я имел проблемы с интервалом подхода , Это то, что я придумал.

function showHide() { 
 
    var element = document.getElementById('hiddenDetails'); 
 
    element.classList.toggle("hidden"); 
 
}

.hidden { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<a href="#" onclick="showHide()">Get Details</a> 
 

 
<div id="hiddenDetails" class="hidden">What you want to show and hide</div>

источник

2017-09-28 15:31:49 phillipmaddox

Как переключить видимость элемента без jQuery?

ответ

Смежные вопросы