找到你要的答案

Q:JQ fadeTo working on consolelog but not on browser

Q:JQ褪变成了工作consolelog而不是浏览器

This is my code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script type="text/javascript">
    $( document ).ready(function() {
$('.parent div').on('click',function(ev) {
  $(ev.currentTarget).fadeTo(500,0).delay(501).hide(0);
});



$('#showAll').on('click', function(ev) {
  $('.parent div').slideDown().fadeTo("slow",0.99);

})
})

   </script>
</head>
<body>

<div class="parent" data-name="parent">
  PARENT
  <div class="child" data-name="child 1">CHILD 1</div>
  <div class="child" data-name="child 2">CHILD 2</div>
  <div class="child" data-name="child 3">CHILD 3</div>
</div>
<button id="showAll">Show All</button>



</body>
</html>

For some reason the fadeTo at the end is not working and I get an empty div thats open up.

I run on chrome console.log -

$('#showAll').on('click', function(ev) {
  $('.parent div').slideDown().fadeTo("slow",0.99);

And its works just fine. Any Idea why its not working as it should on my browser?

Cheers to all.

这是我的密码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script type="text/javascript">
    $( document ).ready(function() {
$('.parent div').on('click',function(ev) {
  $(ev.currentTarget).fadeTo(500,0).delay(501).hide(0);
});



$('#showAll').on('click', function(ev) {
  $('.parent div').slideDown().fadeTo("slow",0.99);

})
})

   </script>
</head>
<body>

<div class="parent" data-name="parent">
  PARENT
  <div class="child" data-name="child 1">CHILD 1</div>
  <div class="child" data-name="child 2">CHILD 2</div>
  <div class="child" data-name="child 3">CHILD 3</div>
</div>
<button id="showAll">Show All</button>



</body>
</html>

因为某些原因,最后褪变成了不工作,我得到一个空的div是开放。

我跑在Chrome console.log—

$('#showAll').on('click', function(ev) {
  $('.parent div').slideDown().fadeTo("slow",0.99);

和它的作品只是罚款。知道为什么它不工作,因为它应该在我的浏览器?

干杯。

answer1: 回答1:

I think you have a problem with missing semicolons, this should fix it too and i think its more clear:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            $('.parent').on('click',function() {
                $(this).fadeTo(500,0).delay(501).hide(0);
            });

            $('#showAll').on('click', function() {
                $('.parent').slideDown().fadeTo("slow",0.99);
            });
        });
   </script>
</head>
<body>

<div class="parent" data-name="parent">
  PARENT
  <div class="child" data-name="child 1">CHILD 1</div>
  <div class="child" data-name="child 2">CHILD 2</div>
  <div class="child" data-name="child 3">CHILD 3</div>
</div>
<button id="showAll">Show All</button>



</body>
</html>

Here an example http://jsfiddle.net/snq47dxd/

我认为你缺少分号有问题,这应该可以解决它,我认为它更清晰:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            $('.parent').on('click',function() {
                $(this).fadeTo(500,0).delay(501).hide(0);
            });

            $('#showAll').on('click', function() {
                $('.parent').slideDown().fadeTo("slow",0.99);
            });
        });
   </script>
</head>
<body>

<div class="parent" data-name="parent">
  PARENT
  <div class="child" data-name="child 1">CHILD 1</div>
  <div class="child" data-name="child 2">CHILD 2</div>
  <div class="child" data-name="child 3">CHILD 3</div>
</div>
<button id="showAll">Show All</button>



</body>
</html>

这里的一个例子http://jsfiddle.net/snq47dxd/

jquery