2015-05-02 3 views
1

Это мой код:JQ fadeTo работает на ConsoleLog, но не в браузере

<!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> 

По какой-то причине fadeTo в конце не работает, и я получаю пустой DIV то будет открыть.

Я бегу на хромированной console.log -

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

И его работы просто отлично. Любая идея, почему она не работает в моем браузере?

Приветствия всем.

+1

работает для меня? http://jsfiddle.net/rvn2sceo/ – sinisake

+0

Да, код в порядке. Я запустил файл с тем же именем, но не с той же папкой. Мой плохой –

ответ

0

Я думаю, что у вас есть проблемы с отсутствующими запятой, это должно исправить это тоже, и я думаю, что его более ясным:

<!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/

+0

Спасибо его работе !!! –

Смежные вопросы