Как переключить видимость элемента без jQuery?
Я пишу аукционный шаблон для eBay, надеясь, что eBay позволил бы его. По-видимому, они не делают, потому что jQuery имеет вещи как string.replace () и т.д.
Код является очень простым.
$(document).ready(function(){
function changeImage(){
if($("#coin1").css("display") == "none"){
$("#coin1").fadeIn("slow");
}else{
$("#coin1").fadeOut("slow");
}
};
setInterval ( changeImage, 5000 );
});
Я в основном должен переписать его в плоскости JavaScript...
2 ответа
Если вы можете жить без эффекта затухания, то это должно быть довольно просто:
function changeImage() {
var image = document.getElementById('coin1');
image.style.display = (image.style.display == 'none') ? 'block' : 'none';
}
setInterval(changeImage, 5000);
Хотя затухание - это круто и все такое, оно действительно усложняет код, когда мы не разрешаем использовать внешние библиотеки. В основном, вам придется иметь дело с дополнительными таймерами, стреляя с очень короткими интервалами, изменяя непрозрачность целевого элемента на каждом обратном вызове.
Если вы действительно хотите затухания, смотрите "Javascript Tutorial - Simple Fade Animation" .
Наиболее основные исчезновения, не совместимые на браузер (попробуйте в 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>