jquery中的show()方法如何用javascript实现

Question

由于一直没法解决ECShop和jQuery的兼容问题，只能使用基本的javascript。

如题，jquery中的show("fast")方法怎么在JS中实现，element.display="block"/"nonw"不是我想要的方法，我希望是对象（图片）的全部显现是有个时间（400ms 或600ms）

Answer 1

一定的时间内不断改变元素的高宽和透明度。

当然，说着简单，自己做起来又是另外一回事。

倘若真的花点心思去做，又会很简单。

另外，好多js特效库，不一定非要jQuery。

Answer 2

我说过了不是用这种方法，这个显示图片的效果很机械。我希望是鼠标悬停，然后图片自然出现，其中有一个过程，1s左右

Answer 3

style里面：

disaply（好像是这个单词）

block：显示

none：不显示

Answer 4

给元素动态增加以下属性。

display属性

block：显示

none：不显示

还有个css属性

opacity (需要注意下IE兼容性 ，具体自己百度)

你需要动态改变 opacity 的值 , fast 就是封装了一个时间值。

Answer 5

我想要的效果是，鼠标在图片悬停后，在旁边出现一个div，图片在里面逐渐显现出来。 你帮我实现了后面的效果，灰常感谢！ 现在我在琢磨怎么达到前面的... 头疼ing

Answer 6

// 刚写的，试了下，貌似还行，就是不知道FF下为什么不行。要赶火车，你自己找找看吧。
// 要给obj一个高度和宽度，否则它会默认为0...
// 貌似同理也能写出来fadeIn和那个下拉效果的哈？
 function myShow(obj,time){
    var height = obj.style.posHeight;
    var width = obj.style.posWidth;
    var times = time / 20;
    obj.style.height = 0;
    obj.style.width = 0;
    obj.style.display = 'block';
    obj.style.opacity = '0';
    obj.style.filter='alpha(opacity=0)';

    for(var i=0;i<times;i++){
        setTimeout(function(){
            obj.style.posHeight += height/times;
            if(obj.style.posHeight > height){
                obj.style.posHeight = height;
            }
            obj.style.posWidth += width/times;
            if(obj.style.posWidth > width){
                obj.style.posWidth = width;
            }
            var opacity = parseFloat(obj.style.opacity,10) + 1/times;
            obj.style.opacity = opacity;
            obj.style.filter='alpha(opacity=' + parseFloat(opacity) * 100 + ')';
        },20*i);
    }
}
window.onload = function(){
    var test = document.getElementById("test");
    myShow(test,500);
}