Javascript/CSS - исчезает изображение, которое не появляется?

Когда моя страница загружается, я хочу, чтобы там были ссылки. Как только все ссылки будут нажаты, я хочу, чтобы изображение исчезло в нижней части страницы (изображение говорит «complete», что в основном означает, что пользователь завершил щелчок по всем ссылкам). Сначала я спрячу изображение, когда загружается веб-страница;Javascript/CSS - исчезает изображение, которое не появляется?

<html> 
    <body> 
     <!-- links which need to be clicked go here --> 
     <img id='complete' src='../images/complete.png' alt='' /> 
    </body> 
</html> 

<style> 
    #complete { 
     visibility: hidden; 
    } 
</style> 

<script> 
    // once all links are clicked 
    $('#complete').fadeIn(); 
</script>

С помощью этого кода #complete не исчезает (возможно, потому, что visiblity установлен в скрытое). Я попытался сделать visiblity установить видимую прямо перед замиранием в команде, но это еще не делает его исчезнуть. Я также попытался сделать в CSS

#complete { 
    filter: alpha(opacity = 0); 
}

и сценарий

$('#complete').fadeTo('slow', '100');

и что Безразлично Работа не работает, #complete просто выглядит очень быстро, а не медленно исчезает. Я использую IE8 с CSS, любую идею о том, как это исправить?

источник

2014-01-09 user2817200

на CSS

#complete { 
display: none; 
}

и Javascript

$('#complete').fadeIn();

И попробуйте использовать последнее Jquery

<body> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
</body>

Посмотри на действии: http://jsfiddle.net/KUqJL/ ваша проблема, что я говорил о CSS

источник

2014-01-09 17:48:52

#complete { visibility: hidden; } заменить: display:none

источник

2014-01-09 17:49:23 n1kkou

Изменение CSS для:

#complete { 
    display:none; 
}

, и если вы хотите использовать .fadeTo(), второй параметр должен быть целым числом от 0 и 1.

$('#complete').fadeTo("slow", 1);

«slow» также можно заменить миллисекундным значением, таким как 3000 (3 секунды), для еще более медленного замирания.

$('#complete').fadeTo(3000, 1);

Вот fiddle, который может помочь.

источник

2014-01-09 17:54:50 Goose

visibility не может быть анимирована. Что-то видимо или скрыто, нет средних этапов.

Но вы можете добиться этого эффекта с помощью opacity вместо visibility, так как видимые элементы имеют opacity между 0 и 1.

#complete { 
    visibility: visible; /* this is the default so this line is not required */ 
    opacity: 0; 
}

И использовать метод .animate().

$('#complete').animate({ 
    opacity: 1.0 
}, 'slow');

JQuery имеет методы, такие как .fadeIn().fadeTo() и .fadeOut(), который одушевляет непрозрачность с добавлением установки display свойства none на 0 непрозрачности и VICA-Versa при анимации.

С display: none не только делает элементы невидимыми, но и разрушает их (ширина и высота равны 0, а элемент не является частью макета), я думаю, что свойство opacity больше подходит для вас.

Это также можно сделать с помощью CSS переходов:

#complete { 
    opacity: 0; 
    -moz-transition: opacity 0.8s linear; 
    -o-transition: opacity 0.8s linear; 
    -webkit-transition: opacity 0.8s linear; 
    transition: opacity 0.8s linear; 
} 
#complete.fadedIn { 
    opacity: 1; 
}

И JavaScript, чем изменение:

$('#complete').addClass('fadedIn');

источник

2014-01-09 18:04:06 SoonDead

Javascript/CSS - исчезает изображение, которое не появляется?

ответ

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