Question

非常简单的jQuery项目作为练习。我已经设置了一个按钮（#btn），我想看看当我点击按钮时是否可以淡入Div。我设置了一个小提琴，代码本身有什么问题吗？

链接到JsFiddle。

- 代码 -

-jQuery -

> jQuery(function() { 
>           $('#btn').click(function(){
>               $('#text2').fadeIn(1000);
>               });      })

- HTML -

<div id="btn">

    <button>Click Me!</button>


</div>

<div id="text">

<h1> hello </h1>

</div>

<div id="text2">

<h2 style> Hi There! <h2>

</div>

Answer 1

fadeIn()适用于display:none; css属性，而不适用于不透明度。您可以使用.css('opacity', '1')或为此设置动画...

Jsfiddle

Answer 2

试试这个，你也忘了在JS小提琴上下载Jquery.min.js

这是链接

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

<强> HTML

<div id="btn">
    <button>Click Me!</button>
</div>

<div id="text">
<h1> hello </h1>
</div>

<div id="text2">
<h2> Hi There! </h2>
</div>

<强> Jquery的

  $(document).ready(function(){
        $('#btn').click(function(){
               $('#text2').fadeIn(1000);
        });
});

<强> CSS

#text2 {display:none;}

（FadeIn()适用于display:none而不适用于opacity）

Answer 3

把ID＆＃39; btn＆＃39;在按钮上，而不是在周围的div上。然后它应该工作。

IEnumerable<T>

Answer 4

如下所示更改您的JQuery：

Fiddle

$(function() { 
    $('#btn').click(function(){
    $('#text2').css('opacity', '1').fadeIn(1000)
  });
});

由于您将不透明度设置为0，因此不会显示内容。在调用css

之前，我已使用fadeIn方法将不透明度设置为1

Answer 5

fiddle

结帐

$(function() { 
    $('#btn button').click(function(){
    $('#text2').css('opacity', '1')
  });
});

CSS

#text2 { 

    opacity: 0;

}

Answer 6

这可能对您有所帮助。请记住，在设置样式属性show之后，您可以fadeIn，slideDown，display:none任何元素。如果您不想将display:none属性设置为样式，请使用fadeToggle它可以正常工作。

<html>
    <head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
    <!-- html with internal style-->
    <button class="clickme">show Honey</button>
    <div class="mydiv" style="display:none;">
      <h2>This is the content what I want to show.</h2>
    </div>

    <!-- js--> 
    <script type="text/javascript">
     $(document).ready(function(){
        $(".clickme").click(function(){
          $(".mydiv").fadeIn(1000);
          //you can use slideDown,show,fadeToggle(fadeIn once click, fadeOut when you click again.)
        });
     });
    </script>

    </body>
    </html>

jQuery fadeIn似乎无法运行？

6 个答案: