Fade in/out с css3 - программирование

Я - любопытство, если возможно достичь этого эффекта (только вставка/выпадение)

с css3. У меня есть аналогичный скроллер для миниатюр, и я хочу создать этот эффект без javascript, или если это невозможно, вы можете помочь мне с простым решением для создания этого с помощью jquery? Благодарю!

Ответы

Ответ 1

Да, это возможно с переходом CSS3.

Вот пример: http://jsfiddle.net/fgasU/

код:

<img src="photo.jpg"/>

img{-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}


img:hover{opacity:0}

Этот простой пример изменит непрозрачность при наведении. Поскольку css-переход определен для свойств "all", и им предоставляется переход на 1 секунду с функцией облегчения в выезде, изменение свойства анимируется.

Кроме того, поскольку это новое свойство, свойство перехода должно предшествовать соответствующей реализации броузера. -webkit для chrome/safari, -moz для firefox/mozilla, -o opera, -ms microsoft.

Ответ 2

Решение jQuery: оберните эскизы в триггерном div, который абсолютно расположен над изображением. Задайте, чтобы угаснуть элементы в и из.

Для решения CSS3 обратитесь к ответу Vigrond.

HTML

<div id="wrapper">
    <img src="http://lorempixum.com/600/600" />
    <div id="trigger">
        <div id="thumbnails">
             <img src="http://lorempixum.com/60/60" />
             <img src="http://lorempixum.com/60/60" /> 
             <img src="http://lorempixum.com/60/60" /> 
             <img src="http://lorempixum.com/60/60" /> 
        </div>
    </div>
</div>

CSS

#wrapper { position:relative; }

#trigger {
    width:100%;
    height:80px;
    position:absolute;
    left:0;
    bottom:20px; }

#thumbnails {
    width:100%;
    height:80px;
    display:none; }

#thumbnails img {
    margin:10px;
    float:left; }

JQuery

$(document).ready(function(){
    $("#trigger").hover(function () {
       $(this).children("div").fadeTo(200, 1);
    }, function(){
         $(this).children("div").fadeOut(200); 
    });
});

Смотрите мою скрипку: http://jsfiddle.net/TheNix/Cjmr6/