Анимация фона Div - CSS или jQuery

Question

У меня есть оптимизированная страница для получения изображений и некоторые очень графические эффекты.

У меня есть кое-что, что я пытался сделать некоторое время, и не могу найти четкий ответ.

Я хочу, чтобы оживить CSS свойства фона с помощью JQuery с той же скоростью, что и внутренней анимации (500)

Имейте в виду, моя другая анимация проецируется на основе, по уважительной причине, что я» m Осуществление

Могу ли я изменить свойство фона для всего div (как видно на живом сайте) при скорости анимации 500?

http://www.sinsysonline.com/design/index.html

JQuery

<script type='text/javascript'> 

$(document).ready(function(){ 
$(".feat3col").hover(
function() { 

$(this).find('img.a').stop().animate({"opacity": "0"}, "fast"); 
$(this).css('background', '#000'); 
}, 
function() { 

$(this).find('img.a').stop().animate({"opacity": "1"}, "slow"); 
$(this).css('background', '#FFF'); 
}); 
}); 
</script> 

http://www.sinsysonline.com/design/index.html
разметки:

<div class="featured"> 
      <div class="feat3col"> 
      <h2>Packages</h2> 
       <div class="imgGlow"> 
        <img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /> 
        <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /> 
       </div> 
      <p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below.</p> 
      <a href="#" class="botCap">Link Link</a> 
     </div> 
      <div class="feat3col"> 
      <h2>Reviews</h2> 

       <div class="imgGlow"> 
        <img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /> 
        <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /> 
       </div> 

      <p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Make more content!</p> 
      <a href="#" class="botCap">Link Link</a> 

      </div> 
      <div class="feat3col"> 
      <h2>About</h2> 

       <div class="imgGlow"> 
        <img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /> 
        <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /> 
       </div> 

      <p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Yet again, these are simply use case scenarios to display different heights and how it still works.</p> 
      <a href="#" class="botCap">Link Link</a> 
     </div> 
    </div> 

http://www.sinsysonline.com/design/index.html

Имейте в виду, если это вопрос о нобе, я сделал несколько больничных сайтов, но мне пришлось использовать плагины. Выполнение этого раздела 100% соло с моей собственной разработкой. Причина, по которой я должен выполнить это в паре с изображением, заключается в том, что если я разрешаю прозрачность на изображении, она становится 50 кб или около того (против 2-7 кб), с оптимизацией и исчезает, бла-бла. Я хочу, чтобы иметь возможность использовать этот образ, чтобы сделать некоторый фактический графический дизайн с затуханием, а весь div соответствует фону, когда он исчезает.

Answer 1

Я не думаю, что вы можете анимировать фон через jQuery. То, что вы могли бы сделать, это добавить другой img или div за другим контентом и постепенно угаснуть его, если необходимо, для подделки анимированного фона.

Answer 2

Пропустить JQuery и просто использовать CSS:

.feat3col{ 
    background-color: #fff; 
    -webkit-transition: background-color 0.5s; 
    -moz-transition: background-color 0.5s; 
    -o-transition: background-color 0.5s; 
    transition: background-color 0.5s; 
} 
.feat3col img.a { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    -o-transition: opacity 0.5s; 
    transition: opacity 0.5s; 
} 

.feat3col:hover{ 
    background-color: #000; 
} 
.feat3col:hover img.a { 
    opacity:0; 
} 

В качестве альтернативы, если вы действительно хотите использовать JQuery, то просто вызвать анимацию на непрозрачности изображения, и передавать опции, где ступенчатая функция/прогресс используется. внутри функции step/progress, сделайте все, что хотите, оживить другие вещи с той же скоростью, что и непрозрачность, но вам нужно обрабатывать сами вычисления цветов. Очевидно, от белого до черного и обратно до белого просто.

JQuery решение:

$(document).ready(function() { 
    $(".feat3col").hover(

    function() { 

     $(this).find('img.a').finish().animate({ 
      opacity: 0 
     }, { 
      duration: 500, 
      progress: function (animation, p, remainingMs) { 
       var c = parseInt(255 - (p * 255)); 
       $(this).closest('.feat3col') 
        .css('background-color', 'rgb('+c+','+c+','+c+')'); 
       // do other animation stuffs 
      } 
     }) 
    }, 

    function() { 

     $(this).find('img.a').finish().animate({ 
      opacity: 1 
     }, { 
      duration: 500, 
      progress: function (animation, p, remainingMs) { 
       var c = parseInt(p * 255); 
       $(this).closest('.feat3col') 
        .css('background-color', 'rgb('+c+','+c+','+c+')'); 
       // do other animation stuffs 
      } 
     }) 
    }); 
}); 

jsfiddle: http://jsfiddle.net/rW3FC/

Answer 3

http://www.sinsysonline.com/design/index.html

Решение: JQuery

$(document).ready(function(){ 
$(".feat3col").hover(
function() { 

$(this).find('img.a').stop().animate({"opacity": "0"}, 500); 
}, 
function() { 

$(this).find('img.a').stop().animate({"opacity": "1"}, 500); 
}); 
}); 
</script> 

Решение: CSS

.feat3col:hover { 
-webkit-transition: all .5s ease-in-out; 
-moz-transition: all .5s ease-in-out; 
-o-transition: all .5s ease-in-out; 
transition: all .5s ease-in-out; 
background:#EEE; 
border-radius:50px; 

}