JQuery - медленно меняющееся изображение - PullRequest
Новая
       8

JQuery - медленно меняющееся изображение

2 голосов
/ 02 октября 2009

Я пытаюсь сделать свое действие при наведении курсора с медленной сменой изображения bg. 

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu.png);
    float:left;
    padding: 2px 10px;
}

.menu_part:hover
{
    background-image: url(../images/bg_menu_hove.png);                            
    color: #FFF;
}

Меню: 

<div id="head_menu">
    <a href="#order"><div>make order</div></a>
    <a href="#portfolio"><div>portfolie</div></a>
    <a href="#contacts"><div>contacts</div></a>
    <a href="#vacancies"><div>vacancies</div></a>
    <a href="#about"><div>about company</div></a>
</div>

Некоторые JQuery: 

$('#head_menu a').addClass('menu_part');

Теперь я пытаюсь написать hover-action для селектора $ ('# head_menu a'). Могу ли я поменять bg-изображение на нужное при наведении, медленно?

Вот мой пробный код: 

    $("#head_menu a").hover(
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000);
        },
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);                
        }
    );

Но теперь он даже не показывает меню. Что я сделал не так? И я тоже попробую использовать bg-position.

Вот код с bg-position, я не могу понять. Я объединил bg_menu.png и bg_menu_hove.png в одно изображение 200px + 200px. Стиль выше не работает даже без JQuery. 

.menu_part:hover
{
    background-image: url(../images/new_menu.png);
    background-position: 0 -200px;
}

Ответы [ 2 ]

3 голосов
/ 02 октября 2009

Прежде всего, стандартной техникой для эффектов наведения при смене фона является объединение обеих картинок. Итак, вставьте bg_menu_hove.png в bg_menu.png после этого, просто поиграйте с положением фона.

Удалите div из тега a (div - элемент блока, а a - встроенный ... это может быть наоборот).

Теперь, если у нас есть только одно изображение, используйте, например, функцию animate из jQuery, конечно (backgroundPosition). Посмотрите на хороший пример и действительно полезный сайт для начинающих: http://visualjquery.com/ (нажмите: Effects -> Custom -> Animate)

1 голос
/ 02 октября 2009

Я думаю, вы могли бы сделать это с помощью функции jquery animate и некоторых небольших изменений в CSS - что-то вроде: 

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu_hove.png);
    float:left;
    padding: 2px 10px;
}

.menu_part div
{
    background-image: url(../images/bg_menu.png);                            
    color: #FFF;
}

А потом: 

$('#head_menu a').addClass('menu_part');

$('.menu_part').bind('mouseover', function() {

    $(this).find('div').animate({ 
        opacity: 0
      }, 1500 );

});

$('.menu_part').bind('mouseout', function() {

    $(this).find('div').animate({ 
        opacity: 1
      }, 1500 );

});

Не могу проверить это в данный момент, извините - но вы поняли основную идею.

...