Как сделать так, чтобы фон Hover плавно исчезал?

Question

У меня есть список на моем веб-сайте, а фон <li> представляет собой 1-пиксельное черное цветное изображение с непрозрачностью 30%, которое повторяется, чтобы заполнить все <li>.Он имеет всплывающее окно, представляющее собой 1-пиксельное изображение белого цвета с непрозрачностью 2%.

Вместо мгновенного появления фона наведения, я хочу, чтобы фон наведения плавно плавно входил (и выходил).

HTML

<ul>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 1</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 2</li>
    </i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 3</li>
</ul>

CSS

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    border-bottom: 1px solid #2f2f2f;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
}

Я думаю, что я хочу достичь с помощью jQuery, но я понятия не имею, как.

РЕДАКТИРОВАТЬ:Просто сказал, что я хочу просто сделать плавный переход <li> с.

Answer 1

Это проще всего сделать с помощью переходов css3, таких как:

li{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;
    background: url('../images/black_op30.png');
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #2f2f2f;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -ms-transition: background 1s;
    transition: background 1s;
}

li:hover{
    background: url('../images/white_op2.png') repeat;
    background: rgba(255,255,255,0.02);
}

Обратите внимание, что происходит переход между версиями прозрачных цветов в rgba. Вы можете добиться того же с jQuery, но это намного сложнее и не будет анимироваться так же гладко. Кроме того, исчезновение между прозрачными цветами и rbga в IE невозможно, и с этой техникой IE будет работать нормально и просто не будет исчезать (это возвращается к вашим файлам .png, где rgba не поддерживается).

IE поддерживаемый метод, (приготовьтесь):

 <li id="wrap">
     <div id="content">
          Content
     </div>
     <div id="fade-1"></div>
     <div id="fade-2"></div>
 </li>

CSS

#content, #fade-1, #fade-2{
    width: 572px;
    height: 20px;
    padding: 4px 14px 0px 14px;       
    position: absolute;
}

#content{
    z-index: 3;
}

#wrap{
   position:relative;  
   width: 600px;
   height: 24px;
}

#fade-1{
   background: url('../images/black_op30.png');
   background:transparent url(../images/black_op30.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/black_op30.png',sizingMethod='scale');
   background: rgba(0,0,0,0.3);     
   border-bottom: 1px solid #2f2f2f;   
   z-index: 1;    
}
#fade-2{
   display:none;
   background: url('../images/white_op2.png') repeat;
   background:transparent url(../images/white_op2.png);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='../images/white_op2.png',sizingMethod='scale');
   background: rgba(255,255,255,0.02);
   border-bottom: 1px solid #2f2f2f;
   z-index: 2;
}

JS:

$('#wrap').hover(function(){
     $('#fade-1').stop().fadeOut();
     $('#fade-2').stop().fadeIn();
}, function(){
     $('#fade-1').stop().fadeIn();
     $('#fade-2').stop().fadeOut();
});

http://www.webmasterworld.com/forum83/7828.htm http://api.jquery.com/hover/ http://api.jquery.com/stop/ http://api.jquery.com/fadeOut/ http://api.jquery.com/fadeIn/

Однако этот метод все равно будет давать худшие результаты, чем метод CSS3 во всех других браузерах, поэтому в идеале вы должны использовать оба и управлять HTML, CSS и JS с помощью оператора if для обнаружения IE. Кроме того, IE9 поддерживает rgba, но не переходы, поэтому для сценария с лучшим из всех миров у вас будет версия IE для ie6-8, версия с использованием цветового плагина jQuery:

http://www.bitstorm.org/jquery/color-animation/

для IE9 и простой CSS3 для всех остальных браузеров.

ИЛИ вы можете сказать: «Эй, кросс-фэйды не так важны для моего дизайна, это нормально, если пропустят те, кто не обновил свой браузер». Что я настоятельно рекомендую.

Answer 2

Я думаю, что если вам придется работать на css2 и с другими браузерами, imho лучший способ - использовать Jquery / JQueryUI

see http://jsfiddle.net/igambin/4CfC6/

, вам, вероятно, придется поигратьсяс этим немного ... идея зависания также имеет свою ценность, возможно, комбинация будет именно тем, что вы ищете

Answer 3

Один из способов - использовать jQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $('.yourclasshere').hover(function() {
        $('#idofelement').fadeIn(300); // Time in milliseconds
    , function() {
        $('#idofelement').fadeOut(300); // Time in milliseconds
    });
</script>

Answer 4

Надеюсь, это даст вам идею и даст толчок, очень просто

        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript">
          $(".yourCssClassNameHere").hover(funcOver, funcOut);
              function funcOver() {
                $("#Id of You want to fade in").fadeIn(100);//time is in ms
                }
               function funcOut() {
                $("#Id of You want to fade out").fadeOut(100);
                 }
           </script>

Другой вариант этого решения может быть при использовании анонимных функций, как @Joseph Torraca показывает в своем ответе.

Чтобы сделать конкретное <li> затухание при наведении, я проверил его, попробуйте это:

  <ul>
   <li onmouseover="$(this).fadeOut()">Hover me to disappear</li>
  </ul>

Для получения дополнительной информации: http://api.jquery.com/hover/
http://www.w3schools.com/jquery/event_hover.asp
FadeIn http://api.jquery.com/fadeIn/
fadeOut http://api.jquery.com/fadeOut/