【问题标题】:jQuery: if my css visibility:hidden, how can i appear my elements?jQuery:如果我的 css 可见性:隐藏,我如何显示我的元素?
【发布时间】:2011-05-22 05:41:42
【问题描述】:

在我的 CSS 中,我设置了一些元素可见性:隐藏,我该如何显示它们?

我以前用不透明度做过,但我在 IE 中有一些错误:

var i = 0;
$mySelection.each(function(i) {
    $(this).delay((i * 100) + ($mySelection.length)).animate(
        { opacity: "1"},
        {queue:true, duration:1000, easing:"quartEaseIn"}
    ); 
})

如果我想用 jQuery 控制可见性而不是不透明度,我该怎么办? 谢谢你

【问题讨论】:

  • 你能告诉我们你是否有你需要的东西吗?如果没有,您能否提供更多详细信息?

标签: jquery visibility opacity


【解决方案1】:

我使用此代码通过 Jquery 更改 CSS 可见性属性。悬停时的 element1 将改变 element2 的可见性。

为同一元素制作了两个不同的脚本以提供鼠标悬停效果。

 <script>$(document).ready(function(){
 $(".element1").mouseover(function(){
     $(".element2").css("visibility","visible");
 });

});

         <script>$(document).ready(function(){
 $(".element1").mouseleave (function(){
     $(".element2").css("visibility","hidden");
 });

});

注意。-那个元素 2 是 CSS 受到影响的元素,最初是隐藏的。所以当鼠标在 Element1 上时,Element2 就会出现。当鼠标离开 element1 时,Element2 再次隐藏。希望对你有帮助

-此代码在堆栈溢出中重新搜索和混合来自用户的其他一些代码的过期

【讨论】:

    【解决方案2】:

    不要使用visibility: hidden,而是使用display:none,如果您想淡入隐藏元素,请使用fadeIn。例如:

    $("div:hidden").fadeIn("slow");
    

    编辑:鉴于您想使用可见性,试试这个:

    var i = 0;
    $mySelection.each(function(i) {
        $(this).delay((i * 100) + ($mySelection.length)).css(
            { 'opacity': '0', 'visibility': 'visible'}).animate(
                { opacity: "1"},
                {queue:true, duration:1000, easing:"quartEaseIn"});
    });
    

    【讨论】:

    • 他为什么要切换到displayvisibility 的行为完全不同。
    • 我提出了它作为简化动画的替代方案。意识到display: none 将元素从视图中完全移除,而不仅仅是隐藏它。
    • 可见性使用(问题的主题)有不同的目的。
    【解决方案3】:
    $(":hidden").css("visibility", "visible");
    

    【讨论】:

      【解决方案4】:

      试试

      $mySelection.show();
      

      【讨论】:

      • 不起作用; jQuery show() 设置“显示”CSS 属性,不影响“可见性”。
      【解决方案5】:
      $(':hidden').show();
      

      我希望这会有所帮助,我希望我能理解你的问题 :) http://api.jquery.com/show/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-02-10
        • 2020-10-30
        • 2017-05-31
        • 1970-01-01
        • 2011-04-04
        • 1970-01-01
        • 2014-09-06
        相关资源
        最近更新 更多