Почему fadeIn не работает?

Question

Я пытаюсь затухать от 0,5 непрозрачности до 1,0 непрозрачности. Но это не сработает.

$(document).ready(function(){ 
 
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(400); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Но гаснуть от 0,5 непрозрачности до 0 работ:

$(document).ready(function(){ 
 
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeOut(400); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Почему это?

Answer 1

Это очень похоже на ошибку; что вы пытаетесь сделать fadeIn элементом, который уже виден - fadeIn считает, что элемент с непрозрачностью 0,5 должен быть видимым, потому что он проверяет свойство display (в данном случае это block, а не none), не для opacity. Если

fadeOut также проверяет наличие display. Поскольку это не none, fadeOut считает, что этот элемент виден (неважно, какая непрозрачность у этого элемента). Таким образом, fadeOut действительно работает.

Для достижения желаемого эффекта, попробуйте использовать вместо fadeTo:

$(document).ready(function(){ 
 
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeTo(400,1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Answer 2

Это потому, что ваш элемент уже виден так fadeIn не служат цели. Вы можете установить display: none в вашем CSS, чтобы запустить элемент как скрытые, так что он может исчезнуть в

FIDDLE

Answer 3

Вы должны добавить дисплей:. Ни к вашему примеру

$(document).ready(function(){ 
 

 
    setTimeout(function(){ 
 
     var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.fadeIn(2500); 
 
    },1000) 
 
})

.box {opacity:0;display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>

Answer 4

JQuery's fadeIn() и fadeOut() не изменяет непрозрачность с числовыми значениями ... Вместо этого он использует ключевые слова для анимации:

Чтение uncompressed latest JQuery script:

jQuery.each({ 
    slideDown: genFx("show"), 
    slideUp: genFx("hide"), 
    slideToggle: genFx("toggle"), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
} 

Он использует ключевые слова показать и скрыть в animate() метод, который проверяет состояние элемента перед применением эффекта ... Так как ваш элемент уже виден , то показать анимация не будет иметь эффект ...

При использовании fadeOut() однако, в скрыть ключевое слово будет иметь эффект, поскольку элемент еще не скрыт.

Answer 5

Кажется fadeIn & fadeOut только работа вне дисплей свойство. Другим вариантом, кроме fadeTo, было бы оживить непрозрачность.

$(document).ready(function(){ 
 
var r = $(".box");r.css({ "opacity":"0.5"});r.text("Box!");r.animate({opacity:1},1000) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"></div>