最简单的翻转/悬停技术

我很想知道人们认为当前最好的方式来进行基本的翻转操作--JQuery或CSS？最简单的翻转/悬停技术

我想翻车与这些状态：

正常：文本段落一个DIV内
悬停：段落文字淡出，照片淡入，在相同的位置，文字
的onmouseout：照片淡出，文字淡化早在

DIV &照片都是已知的尺寸。

我在网上发现的CSS只有翻转效果的90％是专门用于菜单，使用精灵，这不是我所追求的，其他10％是争论是否：悬停是好的实践。

我很好奇人们现在认为最直接的技术 - 最少代码，最不复杂，最兼容。

没有侧翻尚未加入，HTML是与此类似：

<div id="box1"> 
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p> 
</div>

CSS是：

#box1 { 
    width:403px; 
    height:404px; 
    background-image:url('../images/bio_square1.jpg'); 
    background-repeat:no-repeat; 
    color:#fff; 
}

来源

2011-09-06 Ila

衰落效应尚未在浏览器中很好地建立起来，但其中大多数都在测试中。 – animuson

好的 - 淡化是这个过程中最不重要的部分，是一个很好的但不是必不可少的部分。因此，如果只有在精品浏览器中才有效，只要图像滚动效果最佳，就可以。 – Ila

正如其他人所说的，为了实现跨浏览器兼容性，jQuery是最好的选择。但是，如果你只想CSS这里是一个快速和肮脏的CSS3选项使用转换：http://jsfiddle.net/wkhQA/2/

编辑：由于懒惰，我只包括转换的webkit前缀。所以我想在Chrome或Safari中测试一下。道歉。

来源

2011-09-06 19:31:10 DuMaurier

我现在正在使用这种方法，它运行良好，谢谢！ – Ila

对于跨浏览器的兼容性，jQuery将是要走的路。此外，你想要的东西听起来比简单地改变悬停样式复杂一点。例如，您正在将照片淡入淡入到段落淡入的末尾。在纯CSS中无法实现这一点。

来源

2011-09-06 19:14:25 maxedison

我通常会诉诸jquery，如果有需要淡入/淡出元素。

我的HTML代码将是这样的：

<div id="box"> 

    <div class="box-img"> 

     <img src="image.jpg"/> 

    </div> 

    <div class="box-text"> 

     Lorem ipsum 

    </div> 

</div>

按照我的CSS会去是这样的：

#box{ 
    width:500px; 
    height:500px; 
    padding:0; 
} 

    .box-img{ 
     position:absolute; 
     opacity:0; 
    } 

    .box-text{ 
     position:absolute; 
    }

，结束的时候，我可能会使用.mouseover jQuery库（）或.hover（）：

$("#box").hover(
    function() { 
    $(".box-img").fadeTo("100,1"); 
    $(".box-text").fadeTo("100,0"); 
    }, 
    function() { 
    $(".box-img").fadeTo("100,0"); 
    $(".box-text").fadeTo("100,1"); 
    } 
);

这可能不是最佳方法，但我认为背后的粗略想法有什么可能的地方在那里。

您可以在jQuery API处看到执行中的.hover（）。该演示中有一个类似于您可能正在寻找的事物的实例，它正在使用另一种方法。

希望这会有所帮助！ =）

来源

2011-09-06 19:23:45 vynx

最简单的翻转/悬停技术

回答

相关问题