如何切换元素可见性没有jQuery？ [英] How to toggle element visibility without 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重写它...

解决方案

如果你的生活没有褪色效果，它应该是非常简单的：

  function changeImage（）{
 var image = document.getElementById（'coin1'）; 
 image.style.display =（image.style.display =='none'）？ 'block'：'none'; 
} 
 
 setInterval（changeImage，5000）; 
  

虽然渐变很酷，但它确实使代码更加复杂，当我们不允许使用外部库。基本上，你需要处理更多的定时器，以非常短的时间间隔触发，改变每个回调中目标元素的不透明度。

如果你真的想要淡入淡出， Javascript教程 - 简单的淡入淡出动画。

I'm writing an auction template for eBay, hoping that eBay would allow it. Apparently they don't because jquery has things like string.replace() etc.

The code is very basic.

$(document).ready(function(){

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

    setInterval ( changeImage, 5000 );
});

I basically need to rewrite it in plain Javascript...

解决方案

If you can live without the fading effect, it should be pretty straightforward:

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

setInterval(changeImage, 5000);

While fading is cool and all, it's really makes the code a lot more complicated, when we not allowed to use external libraries. Basically, you will need to deal with additional timers, firing with very short intervals, changing the opacity of the target element on each callback.

If you really want fading, see "Javascript Tutorial - Simple Fade Animation".

这篇关于如何切换元素可见性没有jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！