Fade out background-image

Question

У меня есть простое меню изображений. Существует фоновое изображение, которое исчезает при наведении, чтобы отображать пункты меню. Я ищу решение jQuery для постепенного исчезновения этого изображения. Есть идеи?

HTML:

<div id="m1"> 
    <ul class="joomla-nav"> 
     <li>...</li> 
    </ul> 
</div> 

CSS:

#m1 { 
background-image:url('../images/m1.jpg'); 
width:320px; 
height:210px; 
background-color:#1F91B7; 
float:left;} 

#m1:hover { 
background-image:none; 
background-color:transparent} 

#m1:hover .joomla-nav { 
display:block!important; } 

#m1 .joomla-nav { 
display:none!important; } 

Большое спасибо!

Answer 1

Метод .fadeOut() анимирует непрозрачность согласованных элементов. После того, как непрозрачность достигает 0, свойство стиля отображения не установлен ни один, так что элемент больше не влияет на макет страницы

Мы можем анимировать простое изображение:

<div id="clickme"> 
    Click here 
</div> 
<img id="book" src="book.png" alt="" width="100" height="123" /> 

С элементом изначально показано на рисунке, мы можем скрыть это медленно:

$('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

Попробуйте это и сообщите, работает ли оно.

Answer 2

jQuery's .animate() способен анимировать числовые значения.

В отличие от background-color a background-image не представляется числами, поэтому его нельзя анимировать.

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