Исчезать фоновое изображение

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

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

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

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

Answer 2

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

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

<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.
  });
});

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